html - 将页脚置于窗口或页面底部，以较大者为准

Question

我目前在一个网站上工作，该网站要求将页脚放置在窗口底部或页面内容底部，以较低者为准。我曾尝试使用 height: 100% 方法，但这会导致问题。

我还有一个 position: fixed header ，以及我的内容上的一些填充(以像素定义)。此外，页面加载后内容的高度可能会发生变化(使用 Accordion 等)，所以我想知道是否有一种纯 CSS 方法可以将页脚定位到窗口底部或文档底部，同时仍然允许像素填充等。

这是 HTML 的概要结构:

<header></header>
<div class="content">
    <footer></footer>
</div>

我还整理了一个 Fiddle 来演示 CSS 目前是如何工作的:http://jsfiddle.net/LY6Zs/ .不幸的是，我无法更改 HTML 结构(即从 .content 中分离出 footer 元素。

Answer 1

你首先需要在包含所有内容之后有一个容器div

.container
{
min-height:100%;
position:relative;
margin:0 auto;
}

.footer{
position:absolute;
bottom:0;
}