console
<section class="layout layout-div">
<div class="top"></div>
<div class="middle">
<h1>div布局</h1>
<h1>div布局</h1>
<h1>div布局</h1>
<h1>div布局</h1>
<h1>div布局</h1>
</div>
<div class="bottom"></div>
</section>
<section class="layout layout-absolute">
<div class="top"></div>
<div class="middle">
<h1>absolute布局</h1>
<h1>absolute布局</h1>
<h1>absolute布局</h1>
<h1>absolute布局</h1>
<h1>absolute布局</h1>
</div>
<div class="bottom"></div>
</section>
<section class="layout layout-flex">
<div class="top"></div>
<div class="middle">
<h1>flex布局</h1>
<h1>flex布局</h1>
<h1>flex布局</h1>
<h1>flex布局</h1>
<h1>flex布局</h1>
</div>
<div class="bottom"></div>
</section>
<section class="layout layout-grid">
<div class="top"></div>
<div class="middle">
<h1>grid布局</h1>
<h1>grid布局</h1>
<h1>grid布局</h1>
<h1>grid布局</h1>
<h1>grid布局</h1>
</div>
<div class="bottom"></div>
</section>
* {
margin: 0;
}
html, body {
height: 100%;
}
body {
display: flex;
justify-content: space-between;
}
.layout {
width: 24%;
}
.top {
background: red;
}
.bottom {
background: blue;
}
.middle {
background: yellow;
}
.layout-div .top {
height: 100px;
}
.layout-div .middle {
height: calc(100% - 200px);
}
.layout-div .bottom {
height: 100px;
}
.layout-absolute {
position: relative;
}
.layout-absolute .top {
position: absolute;
top: 0;
height: 100px;
left: 0;
right: 0;
}
.layout-absolute .middle {
position: absolute;
top: 100px;
bottom: 100px;
left: 0;
right: 0;
}
.layout-absolute .bottom {
position: absolute;
bottom: 0;
height: 100px;
left: 0;
right: 0;
}
.layout-table {
display: table;
}
.layout-table .top {
display: table-row;
height: 100px;
}
.layout-table .bottom {
display: table-row;
height: 100px;
}
.layout-flex {
display: flex;
flex-direction: column;
}
.layout-flex .top {
height: 100px;
}
.layout-flex .middle {
flex: 1;
}
.layout-flex .bottom {
height: 100px;
}
.layout-grid {
display: grid;
grid-template-rows: 100px auto 100px;
}