共有四种实现方法,其原理与左右定宽中间自适应差不多,更多适用于移动端。
*{
padding: 0;
margin: 0;
}
html, body{
height: 100%;
}
.layout{
height: 100%;
}
.layout article > div{
width: 100px;
}
1.flex布局
<!-- flex布局 -->
<section class="layout flex">
<style>
.layout.flex{
height: 100%;
}
.layout.flex article{
width: 100px;
height: 100%;
display: flex;
flex-direction: column;
}
.layout.flex .top{
height: 100px;
background-color: red;
}
.layout.flex .middle{
flex: 1;
background-color: pink;
overflow: auto;
}
.layout.flex .bottom{
height: 100px;
background-color: green;
}
</style>
<article>
<div class="top"></div>
<div class="middle">
<p>center</p>
</div>
<div class="bottom"></div>
</article>
</section>
2.绝对定位布局
<!-- position布局 -->
<section class="layout position">
<style>
.layout.position{
margin-left: 120px;
}
.layout.position article{
width: 100px;
height: 100%;
}
.layout.position .top{
position: absolute;
top: 0;
height: 200px;
background-color: #999;
}
.layout.position .middle{
position: absolute;
top: 200px;
bottom: 100px;
background-color: green;
}
.layout.position .bottom{
position: absolute;
bottom: 0;
background-color: red;
height: 100px;
}
.clear{
clear: both;
}
</style>
<article>
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
<div class="clear"></div>
</article>
</section>
3.表格布局
<!-- table布局 -->
<section class="layout table">
<style>
.layout.table article{
width: 100px;
height: 100%;
display: table;
}
.layout.table .top{
height: 150px;
background: red;
display: table-row;
}
.layout.table .middle{
display: table-row;
overflow: auto;
background: yellow;
}
.layout.table .bottom{
display: table-row;
background: green;
height: 100px;
}
</style>
<article>
<!-- div中如果不包含内容,页面会显示空白 -->
<div class="top">
<p>top</p>
</div>
<div class="middle">
<p>middle</p>
</div>
<div class="bottom">
<p>bottom</p>
</div>
</article>
</section>
4.grid布局
<!-- grid布局 -->
<section class="layout grid">
<style>
.layout.grid{
margin-left: 220px;
}
.layout.grid article{
height: 100%;
width: 100px;
display: grid;
grid-template-rows: 150px auto 120px;
grid-template-columns: 100px;
}
.layout.grid .top{
background-color: yellow;
}
.layout.grid .middle{
background-color: peru;
}
.layout.grid .bottom{
background-color: pink;
}
</style>
<article>
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</article>
</section>