测试用例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/page2.css">
<title></title>
</head>
<body>
<div class="container" >
<div class="header">
header
</div>
<div class="content">
content
</div>
<div class="side">
side
</div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
body {
margin: 0px;
padding: 0px;
clear: both;
background-color: lawngreen;
width: 100%;
height: 1000px;
/*
100% 只能充满browser的窗口大小(1366X768/等等)
*/
}
.container {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
border: 1px solid red;
}
.header{
position: absolute;
width: 100%;
height: 10%;
border: 1px solid red;
background-color: #dc322f;
}
.side{
position: absolute;
left: 1%;
top: 10%;
width: 10%;
height: 80%;
border: 1px solid red;
background-color: #2d85ca;
}
.content{
position: absolute;
left: 11%;
top: 10%;
width: 70%;
height: 80%;
border: 1px solid red;
background-color: #859900;
}
.footer{
position: absolute;
left: 11%;
top: 90%;
width: 70%;
height: 10%;
border: 1px solid red;
background-color: #343536;
}100% browser 无法完全占据 设定的窗口大小的问题
原文：http://www.cnblogs.com/xgqfrms/p/4852386.html