-1

HTML：

<div id="header">
<div class="container"></div>
</div>

<div id="content">
<div class="container"></div>
</div>

<div id="footer">
<div class="container"></div>
</div>

CSS：

.container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}

我希望页脚保持在页面底部（不是持久地），以便无论页面高度如何，它都保持在底部。

如何用当前的结构来实现这一点？

4

2 回答 2

1

我没有测试过这个 css，但我认为它会做你想要的：

html {
  width: 100%;
  height: 100%;
}
body {
  position: relative;
  width: 100%;
  height: 100%;
}
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

width/height 属性确保主体始终至少是视口的高度。然后，您可以将页脚绝对定位在其中以使其位于底部。如果 body 的内容越过，body 就会变大，而 footer 会停留在 body 的底部。

现在，有一个缺点：页脚可能与正文内容的最后一点重叠。要解决此问题，您可以将此 CSS 添加到正文中：

body {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom: 40px;
}

替换40px您的页脚大小。通过设置padding-bottom，我们为页脚保留该空间。这些box-sizing属性确保这个40px（或任何正确的数字）从该身体高度本身保留，而不是添加到底部。基本上，当页面自然不需要滚动时，它不会出现垂直滚动条。

于 2013-05-01T04:48:59.080 回答
0

You got it done

It's already at the bottom of the "entire" page. No extra styles needed. see it on jsfiddle, with a background color for the container elements and some sample content within them.

I also recommend you using a more semantic html markup

<header>
    <!-- ... -->
</header>
<div id="content">
    <!-- ... -->
</div>
<footer>
    <!-- ... -->
</footer>
于 2013-05-01T04:52:35.427 回答