<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>
如何让第二个div伸展以填充剩余空间（放置第一个和第三个div后）？
如果你想要粘贴页脚系统，那么使用这种技术：
* {
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/
如果我理解你的意图（谁知道......）：
HTML：
<div id="top"></div>
<div id="mid"></div>
<div id="bot"></div>
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
}
使用全部％或所有像素（在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>
从上面的答案得出的其他完美答案
<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>