1.左右高度固定，中間自適應
一般有五種方法：
第一種利用浮動：
分為兩種情況：
文本高度未超過自適應div最小高度：
<section class="layout float">
<style>
.layout.float .left{
float: left;
width: 300px;
background-color: #333;
}
.layout.float .right{
float: right;
width: 300px;
background-color: #333fff;
}
.layout.float .center{
background-color: #666;
}
</style>
<article>
<div class="left">
<p>111</p>
</div>
<div class="right"></div>
<div class="center">
<p>浮動</p>
</div>
</article>
</section>
文本高度超過自適應div最小高度：
<!-- 1.利用浮動 -->
<!-- 1.利用浮動 -->
<section class="layout float">
<style>
.layout.float .left{
float: left;
width: 300px;
background-color: #333;
}
.layout.float .right{
float: right;
width: 300px;
background-color: #333fff;
}
.layout.float .center{
background-color: #666;
}
</style>
<article>
<div class="left">
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
</div>
<div class="right"></div>
<div class="center">
<p>浮動</p>
<p>浮動</p>
<p>浮動</p>
<p>浮動</p>
<p>浮動</p>
<p>浮動</p>
<p>浮動</p>
<p>浮動</p>
<p>浮動</p>
<p>浮動</p>
<p>浮動</p>
<p>浮動</p>
</div>
</article>
</section>
樣式：
第二種利用絕對定位：
文本高度未超過自適應div最小高度：
<section class="layout position">
<style>
.layout.position article div{
position: absolute;
}
.layout.position .left{
left: 0;
width: 300px;
background-color: #333;
}
.layout.position .right{
right: 0;
width: 300px;
background-color: #333fff;
}
.layout.position .center{
left: 300px;
right: 300px;
background-color: #666;
}
</style>
<article>
<div class="left"></div>
<div class="center">
<p>定位</p>
</div>
<div class="right"></div>
</article>
</section>
文本高度超過自適應div最小高度：
position
第三種利用flex布局：
文本高度未超過自適應div最小高度：
<section class="layout flex">
<style>
.layout.flex{
margin-top: 140px;
}
.layout.flex article{
display: flex;
}
.layout.flex .left{
width: 300px;
background-color: #333;
}
.layout.flex .right{
width: 300px;
background-color: #333fff;
}
.layout.flex .center{
flex: 1;
background-color: #666;
}
</style>
<article>
<div class="left"></div>
<div class="center">
<p>flex</p>
</div>
<div class="right"></div>
</article>
</section>
文本高度超過自適應div最小高度：
flex
<!-- 3.利用flex布局 -->
<section class="layout flex">
<style>
.layout.flex{
margin-top: 140px;
}
.layout.flex article{
display: flex;
}
.layout.flex .left{
width: 300px;
height: 500px;
background-color: #333;
}
.layout.flex .right{
width: 300px;
background-color: #333fff;
}
.layout.flex .center{
flex: 1;
background-color: #666;
height: 400px;
}
</style>
<article>
<div class="left"></div>
<div class="center">
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
</div>
<div class="right"></div>
</article>
</section>
第四種利用table屬性：
文本高度未超過自適應div最小高度：
<section class="layout table">
<style>
.layout.table article{
height: 100px;
display: table;
width: 100%;
}
.layout.table article>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background-color: #333;
}
.layout.table .right{
width: 300px;
background-color: #333fff;
}
.layout.table .center{
background-color: #666;
}
</style>
<article>
<div class="left"></div>
<div class="center">
<p>table</p>
</div>
<div class="right"></div>
</article>
</section>
文本高度超過自適應div最小高度：
<section class="layout table">
<style>
.layout.table article{
height: 100px;
display: table;
width: 100%;
}
.layout.table article>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
height: 500px;
background-color: #333;
}
.layout.table .right{
width: 300px;
background-color: #333fff;
}
.layout.table .center{
background-color: #666;
height: 300px;
}
</style>
<article>
<div class="left"></div>
<div class="center">
<p>table</p>
<p>table</p>
<p>table</p>
<p>table</p>
<p>table</p>
<p>table</p>
<p>table</p>
<p>table</p>
<p>table</p>
</div>
<div class="right"></div>
</article>
</section>
第五種利用網格grid布局：
文本高度未超過自適應div最小高度：
<section class="layout grid">
<style>
.layout.grid article{
min-height: 100px;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left{
background-color: #333;
}
.layout.grid .right{
background-color: #333fff;
}
.layout.grid .center{
background-color: #666;
}
</style>
<article>
<div class="left"></div>
<div class="center">
<p>grid</p>
</div>
<div class="right"></div>
</article>
</section>
文本高度超過自適應div最小高度：
<!-- 5.利用grid屬性 -->
<section class="layout grid">
<style>
.layout.grid article{
min-height: 100px;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left{
background-color: #333;
}
.layout.grid .right{
background-color: #333fff;
}
.layout.grid .center{
background-color: #666;
}
</style>
<article>
<div class="left"></div>
<div class="center">
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
</div>
<div class="right"></div>
</article>
</section>
根據以上示例，我們可以總結他們各自存在什么優缺點：
當div中的文本元素的高度超過容器div的高度時，
1.定位，網格布局不能撐高所在div的高度
2.浮動只能撐高所在div的高度
3.flex,和表格可以撐高整個div的高度
4.但是table不能設置每列的高度，始終高度都是一致的，為所寫div的最大高度，
5.所以flex布局是最好的自適應布局
2.上下高度固定，中間自適應
第一種利用table:
<section class="layouttop">
<style>
/*沒有文本內容時，盒子需要被撐開，每個盒子都要被賦予100%的高度*/
html,body,.layouttop,.layouttop article{
height: 100%;
}
/*可以被內容撐開*/
.layouttop article{
display: table;
width: 100%;
}
.layouttop article div{
display: table-row;
}
.layouttop .top{
height: 200px;
background-color: #787878;
}
.layouttop .bottom{
height: 200px;
background-color: #565656;
}
.layouttop .middle{
background-color: #cd4d5d;
}
</style>
<article>
<div class="top">11</div>
<div class="middle">
<p>table</p>
<p>table</p>
<p>table</p>
<p>table</p>
<p>table</p>
<p>table</p>
</div>
<div class="bottom">22</div>
</article>
</section>
第二種利用flex：
<!-- 上下高度固定，中間自適應 -->
<section class="layouttop">
<style>
/*flex上下自定義定位中，每個盒子都要被賦予100%的高度*/
/*html,body,.layouttop,article{
height: 100%;
}*/
/*可以被內容撐開*/
.layouttop article{
display: flex;
flex-direction: column;
}
.layouttop .top{
height: 100px;
background-color: #787878;
}
.layouttop .bottom{
height: 100px;
background-color: #565656;
}
.layouttop .middle{
flex: 1;
background-color: #cd4d5d;
}
</style>
<article>
<div class="top"></div>
<div class="middle">
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
<p>flex</p>
</div>
<div class="bottom"></div>
</article>
</section>
第三種利用絕對定位布局：
<!-- 通過絕對定位和固定定位實現 -->
<section class="layouttop">
<style>
/*flex上下自定義定位中，每個盒子都要被賦予100%的高度*/
/*html,body,.layouttop,.layouttop article{
height: 100%;
}*/
/*可以被內容撐開*/
.layouttop .top{
height: 100px;
top: 0;
background-color: #787878;
position: fixed;
width: 100%;
}
.layouttop .bottom{
height: 100px;
bottom: 0;
background-color: #565656;
position: fixed;
width: 100%;
}
.layouttop .middle{
top: 100px;
bottom: 100px;
background-color: #cd4d5d;
width: 100%;
position: absolute;
/*當文本內容超出自定義高度時，出現自定義滾動條*/
overflow: auto;
}
</style>
<article>
<div class="top"></div>
<div class="middle">
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
<p>position</p>
</div>
<div class="bottom"></div>
</article>
</section>
第四種利用grid網格布局：
grid