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

Question

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

我还有一个position: fixed标题，我的内容有一些填充（以像素为单位）。此外，页面加载后内容的高度可能会发生变化（使用手风琴等），所以我想知道是否有纯 CSS 方式将页脚定位到窗口底部或文档底部, 同时仍然允许像素填充等。

这是 HTML 的概述结构：

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

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

score -2 · Accepted Answer

您首先需要在包含所有内容的容器 div 之后

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

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

1 回答 1