Html 顶部和底部固定、中间高度可变的 CSS 布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17141961/
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 with fixed top and bottom, variable height middle
提问by Ruchan
+-------------------+
| Top (fixed) |
+-------------------+
| |
| |
| Middle (fill) |
| |
| |
+-------------------+
| Bottom (fixed) |
+-------------------+
The topand bottomare fixed divs. They are positioned on the top and bottom of browser window. I want the middlepart to fill the rest of the window between top and bottom divs.
的顶部和底部被固定的div。它们位于浏览器窗口的顶部和底部。我希望中间部分填充顶部和底部 div 之间的窗口的其余部分。
If it's content is more than its height then i can use scrollbars. But its size should not exceed the window.
如果它的内容超过它的高度，那么我可以使用滚动条。但它的大小不应超过窗口。
My CSS and HTML:
我的 CSS 和 HTML：
html, body, #main
{
height: 100%;
}
#content
{
background: #F63;
width: 100%;
overflow: auto;
height: 100%;
margin-bottom: -100px;
}
#footer
{
position: fixed;
display: block;
height: 100px;
background: #abcdef;
width: 100%;
}<div id="main">
<div id="content">xyz</div>
<div id="footer">abc</div>
</div>From this, the Footer shows in the bottom but, the Content div still fills the whole window which should have been [window-footer] height.
由此，页脚显示在底部，但是内容 div 仍然填充了整个窗口，该窗口应该是 [window-footer] 高度。
回答by Salman A
Position the middle div using absolute positioning without specifying height. It does not get much simpler than this:
使用绝对定位而不指定高度来定位中间 div。没有比这更简单的了：
#header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100px;
background-color: #abcdef;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background-color: #abcdef;
}
#content {
position: fixed;
top: 100px;
bottom: 100px;
left: 0;
right: 0;
background-color: #F63;
overflow: auto;
}<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>Use "Full page" option to view the snippet properly.
使用“整页”选项正确查看代码段。
回答by ANonmous Change
html
html
<div id="main">
<div id="header"> Header Content</div>
<div id="content">
<ul><li>Hello World!!! </li>
<li>Hello World!!! </li>
<li>Hello World!!! </li>
<li>Hello World!!! </li>
<li>Hello World!!! </li>
</ul>
</div>
<div id="footer">I am Footer
</div>
css
css
body { margin: 0;}
#main{
position: absolute;
width: 100%;
top: 0;
bottom: 0;}
#header
{
position: absolute;
height: 41px;
top: 0;
left: 0;
right: 0;
text-align:center;
display:block;
background: blue;
}
#content
{
position: absolute;
top: 41px;
bottom: 0;
left: 0;
right: 0;
overflow:scroll;
}
#footer
{
position: absolute;
height: 41px;
bottom: 0;
left: 0;
right: 0;
text-align:center;
display:block;
background: blue;
}
li{
text-decoration: none;
display: block;
height: 20px;
width: 100%;
padding: 20px;
}
回答by teo
If you don't know the header or footer sizes and you can use CSS3 then i would suggest to use flexbox layouting.
如果您不知道页眉或页脚大小并且可以使用 CSS3，那么我建议您使用 flexbox 布局。
Example below (or check fiddle)
下面的示例（或检查小提琴）
HTML:
HTML：
<div class="container">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">bottom</div>
</div>
CSS:
CSS：
.container {
display: flex;
flex-direction: column;
width: 100%;
height: 400px;
}
.header {
flex-grow: 0;
background-color: red;
}
.content {
flex-grow: 1;
background-color: green;
}
.footer {
flex-grow: 0;
background-color: blue;
}
回答by Pavel
I think this is what u want...
我想这就是你想要的...
JSBin: http://jsbin.com/ebilag/1/
JSBin：http: //jsbin.com/ebilag/1/
CSS:
CSS：
html, body {
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.top {
position: fixed;
top: 0;
width: 100%;
height: 100px;
background: yellow;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
background: grey;
}
.middle {
padding-top: 100px;
padding-bottom: 100px
}
HTML:
HTML：
<div class="container">
<div class="top">Top</div>
<div class="middle">Middle</div>
<div class="bottom">Bottom</div>
</div>
回答by Danield
If you know the height of the header and the footer...
如果你知道页眉和页脚的高度......
then you could do this easily with the box-sizingproperty.
那么您可以使用该box-sizing属性轻松完成此操作。
Like so:
像这样：
.container
{
height: 100%;
background: pink;
margin: -64px 0;
padding: 64px 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.content {
overflow:auto;
height:100%;
}
header
{
height: 64px;
background: purple;
position: relative;
z-index:1;
}
footer
{
height: 64px;
background: gray;
position: relative;
z-index:1;
}
回答by xpepermint
The solution with top and bottom paddingis ok but I would suggest a different approach where the main frame is designed as table. This is more flexible and you can hide head or foot without changing the css.
解决方案没问题，top and bottom padding但我建议采用不同的方法，其中主框架设计为table. 这更灵活，您可以在不更改 css 的情况下隐藏头部或脚部。
STYLUS (CSS):
手写笔（CSS）：
html,
body
height: 100%
.container
display: table
height: 100%
.head,
.foot,
.content
display: table-row
box-sizing: border-box
.head,
.foot
height: 70px
background: #ff0000
.content
overflow: auto
.scroll
height: 100%
overflow: auto
box-sizing: border-box
HTML:
HTML：
<div class="container">
<div class="head">...</div>
<div class="content">
<div class="scroll">...</div>
</div>
<div class="foot">...</div>
</div>
回答by Piotr Giniewski
In my opinion you should use js/jquery to change the #content height during page load. This should be something like this (I haven't tested code below, so change it as you need):
在我看来，您应该使用 js/jquery 在页面加载期间更改 #content 高度。这应该是这样的（我没有测试下面的代码，所以根据需要进行更改）：
$().ready(function(){
var fullHeight= function(){
var h=$(window).height()-100; //100 is a footer height
$('#content').css('min-height',h+'px');
};
$(window).resize(fullHeight);
fullHeight();
});
回答by Airen
Please try this:
请试试这个：
HTML
HTML
<div id="header">
header
</div>
<div id="content">
main content
</div>
<div id="footer">
footer
</div>
CSS
CSS
html,body{
marign: 0;
padding: 0;
height: 100%;
}
#header {
height: 100px;
position: fixed;
top: 0;
left:0;
right: 0;
background: orange;
}
#footer {
height: 100px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: green;
}
#content {
padding-top: 100px;
padding-bottom: 100px;
height: -webkit-calc(100% - 200px);
height: -moz-calc(100% - 200px);
height: -ms-calc(100% - 200px);
height; -o-calc(100% - 200px);
height: calc(100% - 200px);
background: #ccc;
}
please view the demo.
请查看演示。
回答by Aravind30790
HTML:
HTML：
<div id="main">
<div id="header">I am Header
</div>
<div id="content">I am the Content
</div>
<div id="footer">I am Footer
</div>
</div>
CSS:
CSS：
#main{width:100%;height:100%;}
#header
{
position:relative;
text-align:center;
display:block;
background:#abcdef;
height:40px;
width:100%;
}
#content
{
background: #F63;
width:100%;
text-align:center;
height:auto;
min-height:400px;
}
#footer
{
position:relative;
text-align:center;
display:block;
background:#abcdef;
height:40px;
width:100%;
}
