如何在CSS网格布局中使用粘性页脚？

文章/答案/技术大牛

发布

1回答

如何让页脚停留在页面底部

html、footer、sticky

它显示页脚从左边的边距开始，但右边没有边距。我在这里做错什么了？请看下面的截图： * {} } /* Every CSS/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6

浏览 0提问于2019-11-04得票数 0

回答已采纳

3回答

具有CSS粘性页脚+ 960网格布局的重叠块

css、sticky-footer、960.gs

粘性页脚的工作方式与预期一致-如果内容窗格为空，则页脚将停留在视口的底部，并在已满时将页脚向下推。我在960网格系统中使用css粘性页脚代码，但当侧栏中的内容展开并到达页脚时，页脚与边栏内容的末尾重叠：你知道我哪里出问题了吗?我该如何解决这个问题？

浏览 3提问于2012-05-24得票数 0

回答已采纳

1回答

Twitter引导3中的底部菜单，带有一些全宽度容器和一些普通容器

html、css、twitter-bootstrap

我试图建立我们的设计师要求使用Bootstrap的布局。布局如下所示：有两个条使用完整的浏览器宽度。主容器和页脚菜单使用固定容器。我成功地使用下面的代码复制了这个布局(以及较小屏幕的布局)，但是当屏幕没有足够的高度来适应主容器和页脚菜单时，问题就会发生。在这种情况下，菜单落在主容器上。我做错了什么，只有当主容器没有足够的垂直空间时，我才能使页脚菜单溢出屏幕？<

浏览 1提问于2015-01-25得票数 2

回答已采纳

4回答

html、css、css-grid

我发现此CodePen解决方案对于CSS网格布局中的粘性页脚，但它对我来说有两个问题：它有点丑陋，因为和它只适用于正文中的两个元素( div和footer) 我需要一些适合这个HTML结构的东西： Some navigation buttons Copyrights and stuff 我真的不想打包并将其转换为，我喜欢用纯CSS来做这件事。

浏览 78提问于2017-09-11得票数 17

回答已采纳

4回答

粘性页脚(不是粘性！)

css、sticky-footer

我一直试图在我的网站上实现一个粘性页脚，但它根本不起作用。基本上，它是一个图像，一些文本绝对定位在它上面。这是我的网站：我使用来做这件事。以下是与我的站点上的页脚相关的代码：margin: 0;text-align:center;margin:0; padding

浏览 0提问于2012-02-14得票数 1

回答已采纳

2回答

如何将水平中心的div包裹起来

html、css

我有这样的布局： <header></header> <div> </ul> <div></container div&

浏览 5提问于2017-07-15得票数 2

回答已采纳

2回答

使用纯CSS的两个带粘性页脚的全高度列布局

sticky-footer、pure-css

我需要设计简单的布局，其要求如下：固定车身/包装宽度(1024，居中)列100%高，即使没有内容表不能用于我在

浏览 6提问于2021-03-29得票数 1

2回答

在sharepoint 2013中，如何在不使用javascript的情况下始终保持页面底部的页脚？

css、sharepoint-2013

大多数客户希望他们的页脚总是在页面的底部(不是粘性的)。当内容较多时，它会自动向下移动，但如果内容较少，我希望将页脚留在屏幕底部。在普通的HTML页面中，我可以使用CSS来实现这一点。但是在SharePoint中，我使用javascript来解决这个问题。有没有办法在SharePoint 2013中只使用CSS就能解决这个问题？

浏览 0提问于2014-05-06得票数 2

1回答

我是从开始的，它提供了一个粘性页脚和一个居中的3列人工布局。两边的列是固定的宽度，主要内容应该是收缩包装以适应其内容的大小，但实际上是拉伸到max-width中为包装器定义的CSS值。最后，包装器包含除了粘性页脚之外的所有内容。我尝试使用display:table设置包装器来收缩包装主要内容，但现在包装器div外部的页脚宽度不正确。它以前匹配其宽度的方式与包装器相同，默认使用它设置的max-width样式，该样式与

浏览 3提问于2012-03-27得票数 1

回答已采纳

2回答

在本例中，如何将页脚强制放到底部？

html、css、twitter-bootstrap

即使没有足够的页面内容将#footer推到页面底部，我如何才能将#footer强制到页面底部呢？

浏览 14提问于2018-01-17得票数 0

1回答

宽度为100%的CSS粘性页脚

css、width、footer、sticky

我正在尝试实现一个具有100%宽度的粘性页脚。它应该粘在页面底部，但不要重叠页面内容div。我使用的页面布局与本例相同：如您所见，页脚的宽度与div#container相同。但是我想把页脚伸展到100%宽，而页面内容保持在中心位置，并在调整浏览器大小时保持高度伸展。我怎么能这么做？

浏览 3提问于2013-09-23得票数 0

回答已采纳

1回答

当使用“对齐内容:间隔”和粘性标题时，CSS网格项溢出网格容器。

html、css、safari、css-grid

我有一个基本的布局，在这个布局中，我的CSS网格位于一个flex布局中，这样网格就可以占用除页脚之外的所有可用空间。在我的CSS网格布局中，我使用了align-content: space-b

浏览 1提问于2019-01-15得票数 2

1回答

如何实现粘性页脚？

javascript、react-native

我想用页脚注释栏替换这个注释栏：就像这样：上述实现的问题在于，当用户单击文本输入时，键盘就会覆盖输入，因为定位是绝对的。下面是我如何实现上面的页脚注释栏： <FlatList renderItem当单击页脚中的文本输入时，我希望它看起来是这样的：我想这可以称为“粘性”页脚。如何在</e

浏览 3提问于2021-01-17得票数 0

回答已采纳

1回答

如何在滚动后将图像放在顶部，并在页面向下滚动到页脚后将其滚动出视图？

jquery、css、twitter-bootstrap

我需要创建一个bootstrap 4布局与一个图像，该图像后，页面滚动，图像到达页眉底部，但当页面向下滚动到页脚和页脚进入视区后，图像应该开始与页面再次滚动。图像应该只在大的和超大的bootstrap 4网格上是粘性的。我正在寻找的行为应该与新的bootstrap 4类" sticky-top“添加到图像中是一样的，只是使用css和jquery，因为由于缺乏浏览器支持，我不能使用sticky-top类。<link hr

浏览 0提问于2017-02-14得票数 0

4回答

Bootstrap粘性页脚不粘滞

html、css、twitter-bootstrap、footer、twitter-bootstrap-2

我在一个免费的引导模板中的页脚有一些问题。我尝试了其他人已经给出的多种解决方案，但都没有结果。代码似乎太长了，不能在这里发布，所以我将html文件和资源上传到了这里的服务器；上面的方法显然在这里有效；，但似乎在我的模板上不起作用，为什么？

浏览 3提问于2013-10-25得票数 3

1回答

删除固定页脚和主物化之间的空格

css、materialize

当我调整我的索引大小时，我在main和footer之间显示空白，在main中我有一个carousel项。 body { min-height: 100vh; flex-direction: column

浏览 4提问于2018-05-16得票数 0

6回答

动态ajax内容改变页面高度的底部页脚css布局

css、ajax、layout

更新似乎在动态内容移动页脚和适当调整容器大小方面没有问题，除非页脚最初被固定在浏览器底部。我花了一整天的时间试图让页脚向下移动，以适应动态添加的内容(通过ajax)。我真的需要一些指针或链接，因为我还没有找到任何有用的东西。同样的css布局对于在浏览器窗口下扩展内容

浏览 10提问于2009-10-09得票数 2

回答已采纳

1回答

页脚背景图像css

css、xhtml、footer

日安，当我调整浏览器大小时，我遇到了页脚图像不能伸展的问题。我试着使用粘性页脚，但我认为它不起作用。我的布局使用960网格，所以我不得不创建一个不同的div来包装我的页脚背景，这样它就可以在浏览器上运行…… <div id="

浏览 2提问于2011-12-03得票数 0

3回答

在sitecore 8.1中，动态将演示文稿详细信息和数据从一个页面复制到另一个页面的占位符

content-management-system、sitecore、sitecore8.1

我有一个客户的要求，我需要使网站的页脚动态通过页面编辑器在页脚占位符由内容作者添加子布局。页脚应包括:一个内容栏-可以在其中添加任何子布局/子布局，如网格组件或富文本。我想添加一个新的占位符'ContentSlotPH‘到我的页脚，它从"/sitecore/Content/Common/Footers/FooterContent/“(我已经为<

浏览 3提问于2016-06-09得票数 0

3回答

Durandaljs2.0覆盖我的css布局设置

durandal

看一看这两个图像，您就会发现，如果使用durandal，布局就不能正常工作。我正在为Internet 10+使用Microsoft网格布局这是

浏览 6提问于2013-07-28得票数 0

回答已采纳

点击加载更多

如何让页脚停留在页面底部

具有CSS粘性页脚+ 960网格布局的重叠块

Twitter引导3中的底部菜单，带有一些全宽度容器和一些普通容器