【问题标题】：100% height relatively positioned footer100% 高度相对定位的页脚
【发布时间】：2013-09-29 22:34:44
【问题描述】：

我正在构建一个 1 列响应式博客网站。我有一个带导航的固定位置标题、包含 x 数量博客文章（摘录）的内容部分和一个包含联系表单的页脚。

<div id="header">Navigation & Branding</div>
<div id="content">Blog Content</div>
<div id="footer">Contact Form</div>

除了页脚的高度之外，一切都按要求工作。我想让页脚高度与浏览器窗口的高度相匹配，这样（除了固定页眉）当您滚动到页面底部时，只有页脚可见并完全填满浏览器窗口。

如何使用 css 实现这一点？

【问题讨论】：

标签： css responsive-design height positioning footer

【解决方案1】：

您可以通过将#footer 设置为 position:absolute; 来做到这一点。然后将宽度和高度都设置为 100%。

【讨论】：

【解决方案2】：

只要您的页脚 div 是正文的直接后代，并且正文的边距和内边距设置为 0，将页脚的高度设置为 100% 就可以了。这个例子应该证明：

<html>
    <head><title>title</title><head>
    <body style="margin:0; padding:0;">
        <div id="header" style="height: 300px; background-color: blue;">Navigation & Branding</div>
        <div id="content" style="height: 500px; background-color: red;">Blog Content</div>
        <div id="footer" style="height:100%; background-color: yellow;">Contact Form</div>
    </body>
</html>

【讨论】：

【解决方案3】：

你想要这样的东西吗？？

HTML：

<div id="mainbody">
  <div id="header">Navigation & Branding</div>
  <div id="content">Blog Content</div>
  <div id="footer">Contact Form</div>
</div>

CSS：

html, body{
    width:100%;
    height:100%;
}
#header{
    position:fixed;
    top:0;
    height:50px;
    width:100%;
    background:red;
    color:white;
}
#mainbody{
    padding-top:50px;
    background:blue;
    color:white;
    width:100%;
}

#footer{
    background:green;
    position:absolute;
    height:100%;
    width:100%;
    color:white;
}

DEMO

【讨论】：