Html 拉伸 div 以填充身体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4996456/
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
stretching div to fill body
提问by oneat
<html style="margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;">
<body style="height:100%;width:100%;">
<div style="height:20px;background-color:red;"></div>
<div style="background-color:black;"></div>
<div style="height:20px;background-color:blue;"></div>
</body>
</html>
How can I make the second div stretch to fill remaining space (after placing the first and third div) in the body?
如何使第二个 div 拉伸以填充正文中的剩余空间（在放置第一个和第三个 div 之后）？
采纳答案by John Lewis
If you want the stick footer system, then use this technique:
如果你想要棒页脚系统，那么使用这个技术：
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px;
}
.footer, .push {
height: 20px;
}
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
回答by thirtydot
If I understand your intentproperly (who knows..):
如果我正确理解您的意图（谁知道..）：
HTML:
HTML：
<div id="top"></div>
<div id="mid"></div>
<div id="bot"></div>
CSS:
CSS：
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
color: #fff
}
#top, #mid, #bot {
position: absolute;
width: 100%
}
#top {
height: 20px;
background: red;
top: 0;
}
#mid {
background: #000;
top: 20px;
bottom: 20px
}
#bot {
height: 20px;
background: blue;
bottom: 0
}
回答by Mihir
Use all % or all pixels(find screen pixel height in js)
使用所有 % 或所有像素（在 js 中查找屏幕像素高度）
<html style="margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;">
<body style="height:100%;width:100%;">
<div style="height:3%;background-color:red;"></div>
<div style="background-color:black; height:94%;"></div>
<div style="height:3%;background-color:blue;"></div>
</body>
</html>
Other perfect answer derived from above answer
来自上述答案的其他完美答案
<html >
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px;
}
.footer, .push {
height: 20px;
}
.header {
height: 20px;
}
</style>
<body >
<div class="wrapper" style="background-color:#ffcc00">
<div class="header" style="background-color:#cccccc"></div>
<div class="push"></div>
</div>
<div class="footer" style="background-color:#cccccc"></div>
</body>
</html>
