5
竖直布局解决方案
source link: http://muyunyun.cn/blog/p67qhttd/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
本文是水平布局解决方案的姊妹篇
题目: 假设宽度已知, 请写出三栏布局, 其中上、下栏高度各为 100 px, 中间自适应。
position 布局
<body>
<style>
html, body, .box {
height: 100%;
.box {
position: relative;
.head {
position: absolute;
width: 100%;
top: 0;
height: 100px;
background: red;
.middle {
position: absolute;
width: 100%;
top: 100px;
bottom: 100px;
background: yellow;
.bottom {
position: absolute;
width: 100%;
bottom: 0;
height: 100px;
background: red
</style>
<div class="box">
<section class="head"></section>
<section class="middle"></section>
<section class="bottom"></section>
</div>
</body>
flex 布局
<body>
<style>
html, body, .box {
height: 100%;
.box {
display: flex;
flex-direction: column;
height: 100%;
.head {
height: 100px;
background: red;
.middle {
flex: 1;
background: yellow;
.bottom {
height: 100px;
background: red
</style>
<div class="box">
<section class="head"></section>
<section class="middle"></section>
<section class="bottom"></section>
</div>
</body>
grid 布局
<body>
<style>
html, body, .box {
height: 100%;
.box {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 100px auto 100px;
.head {
height: 100px;
background: red;
.middle {
bottom: 100px;
background: yellow;
.bottom {
height: 100px;
background: red
</style>
<div class="box">
<section class="head"></section>
<section class="middle"></section>
<section class="bottom"></section>
</div>
</body>
table 布局
<body>
<style>
html, body, .box {
height: 100%;
width: 100%;
.box {
display: table;
.head {
display: table-row;
width: 100%;
height: 100px;
background: red;
.middle {
display: table-row;
width: 100%;
background: yellow;
.bottom {
display: table-row;
width: 100%;
height: 100px;
background: red
</style>
<div class="box">
<section class="head">123</section>
<section class="middle">456</section>
<section class="bottom">789</section>
</div>
</body>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK