logo标签列表

如何将页脚延伸到页面底部？

htmlcss
52

我有一个类似这样的布局

<section id="container">
    <header></header>
    <section id="main"></section>
    <footer></footer>
</section>

目前我的页面布局如下：

-------------------
|                 | 100px height
|  HEADER         |
|-----------------|
|                 |
|  MAIN           | 500px height
|                 |
|-----------------|
|                 |
|  FOOTER         |
|-----------------|
|                 |
|                 |
-------------------

我希望页脚能够像主内容区一样向下延伸到页面底部，如何实现？

-------------------
|                 | 100px height
|  HEADER         | 
|-----------------|
|                 |
|  MAIN           | 500px height
|                 |
|-----------------|
|                 |
|  FOOTER         |
|                 |
|                 |
|  FOOTER         |
-------------------

注意: 我已经注意到目前所有的答案都将页脚固定在页面底部，但是当拖动页脚时，它只会向下移动/主容器会扩展，我希望页脚能够扩展。

1
你的页脚使用了哪种CSS样式？ - j08691
目前它只是 width:100%; height:300px; display:block; background:#000; - Jai
1
我认为这个回答解决了你的问题：https://dev59.com/9XRB5IYBdhLWcg3wv5o_ - Liam
请查看我的答案并告诉我是否有任何不足之处。 - w3uiguru
谢谢大家的回答，但到目前为止，这些答案并没有将页脚延伸到页面底部，它们只是将其固定在底部。我问的是如何扩展。最接近的答案是Tim提供的关于设置body背景等...但我真的不想使用这种方法。 - Jai
显示剩余3条评论
8个回答
164

我一直在寻找解决这个确切问题的方法，最终我找到了一个非常简单的方法来达成我想要的效果：

footer {
    box-shadow: 0 50vh 0 50vh #000;
}

这将创建一个阴影，如果不需要则会从屏幕上消失，否则将为页脚下方的空间提供100vh（一个完整视口高度的覆盖），使得页面背景不出现在其下方。

2
我还必须添加 body { height: 100%; } 才能使其正常工作，但是这是一个很好的解决方案。 - Novocaine
1
如果你只是想将颜色一直延伸到底部，这是一个非常优雅且愚蠢简单的实现方案。谢谢！ - Kaji
2
工作得很好！将页脚颜色延伸到底部，简单而优雅。谢谢！ - YugoAmaryl
3
我不确定我喜欢还是讨厌这个解决方案，但它确实有效。我担心性能。无论如何，使用“50vh”比使用精确长度更好。已提交编辑。 - tremby
2
运行得非常好！ - sdasara
显示剩余5条评论
8

虽然这个问题已经被标记为已回答，但似乎并没有完全回答提问者的问题。我也遇到了同样的挑战，以下是我发现有效的方法：

  1. 将HTML和Body设置为100％高度
  2. 确保所有内容（包括页脚）都用一个大div（site-container）包装起来
  3. 调整页脚中的空间。

这是CSS代码：

html, body{
    height: 100%
}

.site-container{
    overflow: hidden;
    min-height: 100%;
    min-width: 960px;
}

.footer{
    padding-bottom: 32000px;
    margin-bottom: -32000px;
 }

我在这里找到了这篇文章：https://www.joestrong.co.uk/blog/2012/01/12/css-tip-extend-your-sites-footer-to-the-bottom-of-the-page/，其中包含更多信息。这篇文章与网页底部的CSS有关。
6
我会尽力让页脚看起来像是延伸到底部。
假设页脚的背景颜色是 #000000；
设置 body 的背景颜色为 #000000，
确保元素宽度为 100%。
#00000 只是举例，你可能需要一个图像切片或渐变中使用的最后一个颜色等。
2
这是我想要实现的效果，但它并没有真正扩展页脚，这是我想要实现的方式。+1 - Jai
如果您想让页脚具有动态高度，这是实现的方法。如果它是固定高度，我会使用上面的答案之一或使用JavaScript来嗅探准备事件和调整大小事件以计算正文高度！希望这可以帮助您！ - Tim Wickstrom
4
这是我想要实现的效果，但它并没有真正扩展页脚，这是我想要实现的方式。+1 - Jai
你能给我们一个具体的例子，说明你想要做什么吗？如果你只是给页脚设置一个固定高度会怎样？ - Ryan
2
您可以使用固定页脚来实现此效果，就像这里列出的示例一样，并将其应用于您的设计中以将页脚推到文档底部，就像我提供的演示中所示。
编辑此处。
2
我有同样的问题，发现这个方法可行——只要页脚是独立的，即不在容器div或其他任何元素中。

基本上，我需要我的内容是固定宽度并居中于白色背景上，正文标签中水平重复的背景图像可以扩展到浏览器窗口的全宽度，在标题下方提供一个漂亮的带子。我想让页脚呈深色，并且无论内容和浏览器窗口大小如何，都能延伸到页面底部。

我的页面（非常简单）如下：

<!DOCTYPE HTML>
<html>
<head>usual stuff</head>
<body>
<div id="container">
<header>fixed height and containing various stuff</header>
<div id="sidebar">floated left and containing nav</div>
<div id="content">floated left and containing various stuff</div>
<div class="clearfloat"></div>
<!-- end container --></div>
<footer>various stuff, address etc.</footer>
</body>
</html>

然后在CSS中加入这些规则（以及所有其他样式）：

html, body {
    height: 100%;
    overflow: hidden;
}

    footer {
    height: 100%;
}

隐藏的溢出通过补偿容器的高度并延伸超出浏览器窗口，消除了由 100% 的 html 和 body 高度引起的恼人滚动条。
1
谢谢，但并没有真正回答我的问题。我不想让页脚固定在底部，我想让它扩展高度。 - Jai
1
与 @c4collins 类似，您可以使用视口高度而不是固定像素，在某些人拥有巨大的显示器时更加合适。
footer{
  box-shadow: 0 100vh 0 100vh #000000;
}
你应该提到回答者的名字，因为不清楚你指的是哪一个。 - Jaquez
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接