Html CSS 布局帮助 - 将 div 拉伸到页面底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3657122/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Layout Help - Stretch div to bottom of page
提问by Accelebrate
I'm trying to create a layout with a 'header' area which contains a logo and some links, and then a content area which needs to extend to the bottom of the page. This is where I'm getting stuck.
我正在尝试创建一个带有“标题”区域的布局，其中包含一个徽标和一些链接，然后是一个需要扩展到页面底部的内容区域。这就是我陷入困境的地方。
I've surrounded the header and content with a container div which has a height of 100%, this works fine. But I can't then get the content div to stretch to the bottom of the container div as giving it a minimum height of 100% appears to take the height from the page body, so I end up with a scroll bar due to the space taken up at the top of the page by the header.
我用高度为 100% 的容器 div 包围了标题和内容，这很好用。但是我无法让内容 div 拉伸到容器 div 的底部，因为给它 100% 的最小高度似乎是从页面主体中获取高度，所以由于空间的原因，我最终得到了一个滚动条由页眉占据页面顶部。
Here's a wireframe which hopefully makes what I'm trying to achieve a bit clearer...
这是一个线框，希望能让我想要实现的目标更加清晰......
Here is a quick CSS example, this works, apart from there always being a scrollbar at which appears to be the height of the header area...
这是一个快速的 CSS 示例，除了总是有一个滚动条似乎是标题区域的高度之外，它是有效的...
html, body {
height: 100%;
margin: 0;
padding: 0;
color: #fff;
}
body {
background-color: #000;
}
#container {
position: relative;
margin: 0 auto;
width: 1000px;
min-height: 100%;
}
#header {
padding-top: 26px;
}
#logo {
width: 194px;
height: 55px;
margin: 0 auto;
background-color: #fff;
}
#content {
margin-top: 10px;
position: absolute;
width: 1000px;
min-height: 100%;
background-color: #fff;
}
回答by Rakka Rage
this works by wrapping the header and body in a div to push footer down
这是通过将页眉和正文包裹在一个 div 中以将页脚向下推来实现的
index.html
索引.html
<div id="wrap">
<div id="header">
header
</div>
<div id="main">
main<br/>main<br/>main<br/>main<br/>main<br/>main<br/>
</div>
</div>
<div id="footer">
footer
</div>
style.css
样式文件
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
#header {
border-top:20px solid #fff;
height: 33px;
line-height: 33px;
text-align: center;
background-color: green;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%;background-color:gray;}
#main {
overflow: auto;
padding-bottom: 53px; /* must be same height as the footer */
background-color: red;
height: 90%
}
#footer {
position: relative;
margin-top: -53px; /* negative value of footer height */
height: 33px;
line-height: 33px;
border-bottom:20px solid #fff;
text-align: center;
background-color:blue;
}
回答by Stephan Muller
Make the container div position:relative and the content div position:absolute. Then give the content div top:<header height> and bottom:0
使容器 div position:relative 和内容 div position:absolute。然后给内容 div top:<header height> 和 bottom:0
Not in a position to test this right now, but I think something like this should work.
现在无法对此进行测试，但我认为这样的事情应该可行。
回答by Yonatan Ayalon
limitations: header height should be static, with an absolute height.
限制：标题高度应该是静态的，具有绝对高度。
content height is dynamic.
内容高度是动态的。
CSS code:
CSS代码：
* {
padding:0;
margin:0;
}
html, body {
height: 100%;
color: #fff;
}
#header {
background: red;
position: absolute;
z-index:20;
height: 7em;
overflow:hidden;
width:100%;
}
#content {
background: blue;
position: absolute;
top: 0;
padding-top: 7em;
min-height: 100%;
box-sizing: border-box;
}
content stretch all the way to the bottom, even when text is short.
即使文本很短，内容也会一直延伸到底部。
when content's text is longer than our window height - we get the auto scroll
当内容的文本长于我们的窗口高度时 - 我们会自动滚动
Example: http://jsfiddle.net/fixit/p3B4s/3/
