圣杯布局的三种实现
三种方法来实现圣杯布局,分别是浮动,flex布局以及position方式实现。
一、float实现
<style>
.header,.footer{
height:100px;
width:100%;
background:red;
}
.footer{
clear:both;
}
.container{
padding-left:200px;
padding-right:300px;
}
.container div{
float:left;
}
.middle{
height: 100px;
width:100%;
background:yellow;
}
</style>
div class="header">这里是头部</div>
<div class="container">
<div class="middle">中间部分</div>
</div>
<div class="footer">这里是底部</div>