共计 1776 个字符，预计需要花费 5 分钟才能阅读完成。
1、绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>absolute</title>
<style>
html,body{height:100%;}
</style>
</head>
<body>
<style>
.container>div {
position: absolute;
width : 100%;
}
.header {
top: 0;
height: 100px;
background-color: red;
}
.body {
top: 100px;
bottom: 100px;
background-color: blue;
}
.footer {
bottom: 0;
height: 100px;
background-color: red;
}
</style>
<div class="container">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
</body>
</html>2、弹性布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex</title>
<style>
html,body{height:100%;}
</style>
</head>
<body>
<style>
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.body {
flex: 1 1 auto;
background-color: blue;
}
.header, .footer {
height: 100px;
flex: 0 0 auto;
background-color: red;
}
</style>
<div class="container">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
</body>
</html>3、网格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>grid</title>
<style>
html,body{height:100%;}
</style>
</head>
<body>
<style>
.container {
display: grid;
height : 100%;
grid-template-rows : 100px auto 100px;
}
.header, .footer{background-color:red;}
.body {background-color:blue;}
</style>
<div class="container">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
</body>
</html>4、表格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table</title>
<style>
html,body{height:100%;}
</style>
</head>
<body>
<style>
.container {
display: table;
height : 100%;
width :100%;
}
.container>div{display: table-row;}
.header, .footer {
height:100px;
background-color:red;
}
.body {background-color:blue;}
</style>
<div class="container">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
</body>
</html>PS：不知道为什么表格布局里面设置背景颜色无效，自己在那时还是没有解决。当然这也算是在这种情况下使用表格布局的一个缺点吧，背景色容易被屏蔽。有哪位童鞋能够很好处理这个问题的还请指教一波，谢谢 > <
正文完
