DEMO

Question

我正在构建一个响应式博客网站。我有一个带导航的固定位置标题，带有x个博客帖子的内容部分（作为摘录）和一个包含联系表单的页脚。

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

除了页脚的高度外，所有内容都按要求运行。我想使页脚高度与浏览器窗口的高度相匹配，以便当滚动到页面底部时（除固定页眉之外）只有页脚可见并完全填充浏览器窗口。

如何使用css实现此目的？

Answer 1

您可以将#footer设置为position：absolute;然后设置宽度和宽度高度为100％。

Answer 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>

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

100％高度相对定位的页脚

3 个答案:

DEMO