版权声明： https://blog.csdn.net/xiasohuai/article/details/81948398
效果图：
<body>
<header>
<ul>
<li>首页</li>
<li>说说</li>
<li>日志</li>
<li>相册</li>
</ul>
</header>
<div id="box">
</div>
</body>方式一：脱离文档流(这种方式是box占了全屏，存在bug）
*{
margin:0;
padding: 0;
}
body,html{
height: 100%;
width: 100%
}
header{
height: 60px;
width: 100%;
background: red;
position:fixed;
}
#box{
height: 100%;
background: green
}
ul {
list-style: none
}
ul li {
height: 60px;
width: 100px;
float: left;
line-height: 60px;
text-align:center;
}方式二：脱离文档流
*{
margin:0;
padding: 0;
}
body,html{
height: 100%;
width: 100%
}
header{
height: 60px;
width: 100%;
background: red;
float: left;
}
#box{
height: 100%;
background: green
}
ul {
list-style: none
}
ul li {
height: 60px;
width: 100px;
float: left;
line-height: 60px;
text-align: center;
}方式三：calc(100% - 60px)
*{
margin:0;
padding: 0;
}
body,html{
height: 100%;
width: 100%
}
header{
height: 60px;
width: 100%;
background: red;
}
#box{
height: calc(100% - 60px);
width: 100%;
background: green
}
ul {
list-style: none
}
ul li {
height: 60px;
width: 100px;
float: left;
line-height: 60px;
text-align: center;
}