样式如图：
css布局(一)如下：
<style type="text/css">
*{
padding:0;
margin: 0;
}
html,body{
height:100%;
}
.header{
width: 100%;
height: 50px;
background: #333;
margin-bottom: -50px;
position:relative;
}
.content{
width: 100%;
height: 100%;
padding-top: 50px;
box-sizing:border-box;
background-color: red;
}
.content>p{
width: 25%;
height: 100%;
float: left;
background-color: #999;
font-size: 100px;
color: #fff;
}
.content>p:nth-child(2){
background-color: red;
}
.content>p:nth-child(3){
background-color: green;
}
.content>p:nth-child(4){
background-color: blue;
}
</style>css布局(二)如下：
.header{
width: 100%;
height: 50px;
}
.content{
width: 100%;
//calc用上就不用margin、padding了
height: calc(100% - 50px);
}html代码为：
<body>
<div class="header"></div>
<div class="content">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
</body>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
