2

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

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

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

如何使用 css 实现这一目标？

4

3 回答 3

0

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

于 2013-09-24T15:54:13.937 回答
0

只要您的页脚 div 是 body 的直接后代，并且 body 的边距和填充设置为 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>
于 2013-09-24T15:55:58.070 回答
0

你想要这样的东西？？

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;
}

演示

于 2013-09-24T16:02:27.980 回答