文章目录
和三栏布局不一样，float没有上下浮动，所以不能利用float进行布局；像是圣杯布局，双飞翼布局都是利用浮动+margin ，所以上下三栏布局方法就相应的少了一些。像是圣杯、双飞翼布局可参考 一次搞定面试常问的三栏布局–五种实现
利用绝对定位+margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>yang</title>
<!-- 利用绝对定位+padding -->
<style>
{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
}
#container{
position: relative;
width: 100%;
height: 100%;
}
.top{
position: absolute;
top: 0;
width: 100%;
height: 100px;
background-color: aquamarine;
}
.bottom{
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
background-color: brown;
}
.middle{
width: 100%;
height: 100%;
background-color: cornflowerblue;
padding: 100px 0 200px 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="container">
<div class="top">top</div>
<div class="middle">middle</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
利用flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>yang</title>
<!-- 利用flex -->
<style>
*{
padding: 0;
margin: 0;
}
#container{
position: absolute;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background-color: cornflowerblue;
}
.top{
background-color: crimson;
/* height: 100px; 等同于flex：0 0 10px */
width: 100%;
flex: 0 0 100px;
}
.bottom{
background-color: darkgreen;
/* height: 200px; */
width: 100%;
flex: 0 0 200px;
}
.middle{
background-color: darkorange;
flex: 1;
}
</style>
</head>
<body>
<div id="container">
<div class="top">top</div>
<div class="middle">middle</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
利用网格布局
display:grid;网格布局中，和flex用法类似。其直系子元素将成为网格元素。
grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列
grid-template-columns: 200px 200px 200px;是创建三列布局，将网格元素依次排列。- 如图：
- 如图：
- fr是单位，代表网格容器中可用空间的一等份。会随着空间大小而改变。
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>yang</title>
<!-- 利用网格布局grid -->
<style>
*{
padding: 0;
margin: 0;
}
#container{
position: absolute;
display: grid;
grid-template-rows: 100px 1fr 200px;
width: 100%;
height: 100%;
background-color: cornflowerblue;
}
.top{
width: 100%;
height: 100px;
background-color: coral;
}
.middle{
width: 100%;
height: 100%;
background-color: cornflowerblue;
}
.bottom{
height: 200px;
width: 100%;
background-color: darkgreen;
}
</style>
</head>
<body>
<div id="container">
<div class="top">top</div>
<div class="middle">middle</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
当然，还有许多方法，多尝试。