一、题目
根据题目给出你的答案。
(上栏、下栏高度固定,中间自适应)
题目:假设宽度已知,请写出三栏布局,其中上栏、下栏高度各位150px,中间自适应。
二、我的代码详情
https://codepen.io/janmie-cjm/pen/vYGReEv
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title>页面布局-三栏布局2</title>
<style>
html *{
margin: 0;
padding: 0;
}
html,body {
height: 100%;
background-color: #ffffee;
}
article {
margin-bottom: 10px;
}
</style>
</head>
<body>
<!-- 假设宽度已知,请写出三栏布局,其中上栏、下栏高度各位150px,中间自适应。 -->
<!-- 1-绝对定位 -->
<section>
<style>
.wrapper1 {
width: 100px;
}
.top1,.bottom1 {
background-color: #cff;
height: 50px;
display: absolute;
}
.top1 {
top: 0;
}
.bottom {
bottom: 0;
}
.center1 {
background-color: #fcc;
}
</style>
<article>
<div class="wrapper1">
<div class="top1">我是top</div>
<div class="center1">
<h6>1-绝对定位</h6>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
</div>
<div class="bottom1">我是bottom</div>
</div>
</article>
</section>
<!-- 2-flexbox -->
<section>
<style>
.wrapper2 {
width: 100px;
display: flex;
flex-direction: column;
}
.center2 {
background-color: #fcc;
flex: 1;
}
.top2,.bottom2 {
height: 50px;
background-color: #cff;
}
</style>
<article>
<div class="wrapper2">
<div class="top2">我是top</div>
<div class="center2">
<h6>2-flexbox</h6>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
</div>
<div class="bottom2">我是bottom</div>
</div>
</article>
</section>
<!-- 3-table -->
<section>
<style>
.wrapper3 {
display: table;
}
.wrapper3 div {
display: table-columns;
width: 100px;
}
.top3,.bottom3 {
background-color: #cff;
height: 50px;
}
.center3 {
background-color: #fcc;
}
</style>
<article>
<div class="wrapper3">
<div class="top3">我是top</div>
<div class="center3">
<h6>3-table</h6>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
</div>
<div class="bottom3">我是bottom</div>
</div>
</article>
</section>
<!-- 4-grid -->
<section>
<style>
.wrapper4 {
display: grid;
grid-template-rows: 50px auto 50px;
grid-template-columns: 100px;
}
.top4,.bottom4 {
background-color: #cff;
}
.center4 {
background-color: #fcc;
}
</style>
<article>
<div class="wrapper4">
<div class="top4">我是top</div>
<div class="center4">
<h6>4-grid</h6>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
</div>
<div class="bottom4">我是bottom</div>
</div>
</article>
</section>
</body>
</html>
三、总结
- 本题目的解决方案有哪些?
绝对定位 / flexbox / 表格布局 / 网格布局 ;
上中下的三栏布局不需要应用以上布局方式也可以,只要每一部分内容都在各自的块级元素内,内容会自动自上而下分布。
-代码中 “html *{…}” 可以全局应用; table布局
-解决方案中,外层需要用display:table;里面子元素需要用到display: table-column;
-网格布局解决方案中,代码直接应用在外层包裹层上,display: grid; grid-template-rows添加多行,grid-template-columns 添加多列。
*代码尚存在很多不足,望提出不同的意见,互相交流。*