一、题目
根据题目给出你的答案。
（上高度固定，下自适应）
题目：上高度固定为150px，下自适应。
二、我的代码详情
https://codepen.io/janmie-cjm/pen/QWNBYgP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面布局-两栏布局3</title>
<style>
html *{
margin: 0;
padding: 0;
}
body{
background: #ffccee;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 上高度固定150px，下自适应 -->
<!-- 1-绝对定位 -->
<!-- <section>
<style>
.top1 {
background: #aee;
width: 100%;
height: 150px;
top: 0;
position: absolute;
}
.bottom1 {
background: #eaa;
width: 100%;
height: 100%;
top: 150px;
position: absolute;
}
</style>
<article class="wrapper1">
<div class="top1">我是上栏</div>
<div class="bottom1">我是下栏</div>
</article>
</section> -->
<!-- 2-flexbox -->
<!-- <section class="wrapper2">
<style>
body,section,article {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
}
.top2 {
background: #aee;
width: 100%;
height: 150px;
}
.bottom2 {
background: #eaa;
width: 100%;
flex: 1;
}
</style>
<article>
<div class="top2">我是上栏</div>
<div class="bottom2">我是下栏</div>
</article>
</section> -->
<!-- 3-table -->
<!-- <section>
<style>
.wrapper3 {
display: table;
width: 100%;
height: 100vh;
}
.wrapper3>div {
display: table-row;
}
.top3 {
background: #aee;
width: 100%;
height: 150px;
}
.bottom3 {
background: #eaa;
width: 100%;
}
</style>
<article class="wrapper3">
<div class="top3">我是上栏</div>
<div class="bottom3">我是下栏</div>
</article>
</section> -->
<!-- 4-grid -->
<section>
<style>
.wrapper4 {
display: grid;
grid-template-columns: auto;
grid-template-rows: 150px auto;
width: 100%;
height: 100vh;
}
.top4 {
background: #aee;
width: 100%;
}
.bottom4 {
background: #eaa;
width: 100%;
}
</style>
<article class="wrapper4">
<div class="top4">我是上栏</div>
<div class="bottom4">我是下栏</div>
</article>
</section>
</body>
</html>
三、总结
-
本题目的解决方案有哪些？
绝对定位 / flexbox / 表格布局 / 网格布局 ； -
各方案优缺点？
1）绝对定位
优：简单
缺：脱离文档流，需结合BFC应用，代码较多
2）flexbox
优：简单快捷，兼容性好
3）表格布局
优：兼容性较好
缺：每一列高度会同时变化；表格需先渲染，延迟页面生成速度
4）网格布局
优：可实现多行多列的二维复杂操作，兼容性较好，简化代码 -
兼容性好的方案有？
flexbox、网格布局
注意！！！上下布局撑开整个页面，一般最外层高度设为height = 100vh才行。
*代码尚存在很多不足，望提出不同的意见，互相交流。*