圣杯布局的三种实现

圣杯布局的三种实现

三种方法来实现圣杯布局，分别是浮动，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>

二、flex布局实现