Html 全高和全宽，固定标题，带 CSS 的全内容高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7104216/
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
Full height & width, fixed header, full content height with CSS
提问by dandoen
I have been searching for this on SO, but I just could not find something exactly similar. What I am trying to achieve is to have a page, that is full in height and in width, but does have a fixed header. The content height needs to be the remaining area left, but that area needs to have a height of 100%, most of the html code found on SO is just using height: auto. Basically I want to do this so that I can style it: adding border etc. Here's the code so far:
我一直在 SO 上搜索这个，但我找不到完全相似的东西。我想要实现的是有一个页面，高度和宽度都是完整的，但确实有一个固定的标题。内容高度需要是剩下的剩余区域，但该区域需要有 100% 的高度，所以在 SO 上找到的大部分 html 代码只是使用 height: auto。基本上我想这样做，以便我可以设置样式：添加边框等。这是到目前为止的代码：
<html>
<head>
<title>Test</title>
<style type="text/css">
body, html {
height:100%;
}
body {
margin:0;
padding:0;
}
#header{
height:50px;
background:green;
width:100%;
}
#wrapper {
background:blue;
position:relative;
min-height:100%;
height:auto !important;
height:100%;
}
#content {
margin: 10px;
background-color: black;
height: 100%;
width: 100%;
border: 3px dashed gray;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content"></div>
</div>
</body>
</html>
回答by thirtydot
Note that if the content is too tall to fit inside #content, it will simply be hidden.
请注意，如果内容太高而无法放入里面#content，它将被简单地隐藏起来。
HTML:
HTML：
<div id="header">header</div>
<div id="content">content</div>
CSS:
CSS：
#header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
background: green
}
#content {
position: absolute;
top: 50px;
left: 0;
bottom: 0;
right: 0;
border: 3px dashed gray;
background: #ccc
}
