logo标签列表

使用CSS使页脚占据剩余底部空间

cssfooter
18

我希望我的页脚高度与剩余底部空间相同。目前，我正在使用以下 CSS 样式来设置页脚：

clear: both;
float: left;
background-color: #1F1102;
color: #E4F2FA;
min-height: 60px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
padding: 0;
padding-top: 10px;
text-align: left;
width: 100%;
min-width: 1000px;
margin: auto;
结果是：

如图所示:

enter image description here

正如您所看到的，黑色区域只占据了最小高度。我想让它在后面的空间中占据整个剩余空间[用问号标出]。 我需要做哪些更改才能实现这一点？

注：- 我不想使用position:fixed使其固定在底部。

2
请访问http://www.cssstickyfooter.com/。 - Madara's Ghost
1
+1 @Rikudo Sennin 这是一个很好的解决方案，可以始终将页脚固定在视口底部，但它不会改变其相对于浏览器窗口的高度。 - feeela
stackoverflow.com：html5页面100%高度问题 - Nandhakumar
5个回答
20

简而言之，你做不到！

为什么不行？

因为块级元素无法拉伸并填充高度空间。

如何假装实现？

使用与页脚相同的背景颜色（或相同的背景图像）作为容器的背景色，这会使其看起来始终填满整个空间。

这实际上是一个优雅的解决方案。我刚遇到了这个问题，找到了这个答案，然后想，干脆看看CSS有多难实现。在重构后，简化了我的CSS并解决了问题。谢谢@SecondRikudo！ - Clint Pachl
这是最好的解决方案，我已经寻找和测试了半天。2个赞！ - luke_mclachlan
1
@luke_mclachlan 这个答案现在可能已经过时了。看一下flexbox，用它可能是可以实现的。 - Madara's Ghost
@Second_Rikudo 是的，我已经研究过了，尝试了一下，但是没有成功。如果我花更多时间的话可能会成功，但是你的解决方案只用了大约15秒 ;-) - luke_mclachlan
现在使用 flexbox 可以通过类似于此处所述的方法实现。https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ 除了将“flex：1”（文章中列为“flex-grow:1”）放在内容元素而不是页脚元素中，应该这样做。 - codemaker
6
4
为了防止链接失效，您可以将内容设置为<body><main></main><footer></footer></body>，然后将body样式设置为 display:flex; min-height: 100vh; flex-direction: column，在您的情况下，将footer样式设置为flex:1。如果您想让页脚固定在屏幕底部，请将flex:1应用于main元素而不是footer元素。 - divillysausages
1

在CSS中，您实际上无法使块级元素跨越整个可用高度。最好的方法是找到一些类似的解决方法。

例如，您可以使用背景颜色（用于body/wrapper）或位于底部的居中背景图像……

0
这对我非常有效（最初来自如何使用 CSS 保持页脚在页面底部）：
将此放入您的 CSS 中：
html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    background:#ededed;
    padding:10px;
}
#content {
    padding-bottom:100px; /* Height of the footer element */
}
#footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

然后在你的index/master/_layout/或其他文件中：

<body>

    <div id="wrapper">

        <div id="header">
        </div><!-- #header -->

        <div id="content">
        </div><!-- #content -->

        <div id="footer">
        </div><!-- #footer -->

    </div><!-- #wrapper -->

</body>
-5

我曾经遇到过同样的问题。对我有用的方法是在页脚中添加几个像素的填充，这样它就占据了页面底部。

这就是对我有用的方法：

footer{
    padding-bottom:10px;
}
不起作用，或者你可能误解了问题？ - luke_mclachlan
@Asif 另外，你的解决方案会给页面增加无用的高度，这将使你的页面可滚动，除非它完全适合其余的高度，但我怀疑在大多数情况下不会。 - Ryan S
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接