header html 高度,css布局，header头部固定，content内容高度100%，如何不出现纵向滚动条...

样式如图：

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;

}

css布局(二)如下：

.header{

width: 100%;

height: 50px;

}

.content{

width: 100%;

//calc用上就不用margin、padding了

height: calc(100% - 50px);

}

html代码为：

1

2

3

4