1、绝对定位
absolutehtml,body{
height:100%;
}
.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;
}
2、弹性布局
flexhtml,body{
height:100%;
}
.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;
}
3、网格布局
gridhtml,body{
height:100%;
}
.container {
display: grid;
height : 100%;
grid-template-rows : 100px auto 100px;
}
.header, .footer{
background-color:red;
}
.body {
background-color:blue;
}
4、表格布局
tablehtml,body{
height:100%;
}
.container {
display: table;
height : 100%;
width :100%;
}
.container>div{
display: table-row;
}
.header, .footer {
height:100px;
background-color:red;
}
.body {
background-color:blue;
}
PS：不知道为什么表格布局里面设置背景颜色无效，自己在那时还是没有解决。当然这也算是在这种情况下使用表格布局的一个缺点吧，背景色容易被屏蔽。有哪位童鞋能够很好处理这个问题的还请指教一波，谢谢> <
1022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
