# 上下定高满屏布局

1、absolute

<style>
*{
margin:0;
}
html,body,.content{
height:100%;
}
.top,.bottom{
position: absolute;
height: 50px;
background-color: red;
left: 0;
right: 0;
}
.top{
top:0;
}
.bottom{
bottom:0;
}
.center{
position: absolute;
top: 50px;
bottom: 50px;
left: 0;
right: 0;
background-color: antiquewhite;
overflow: auto;
}
</style>
<div class="content">
<div class="top">定高</div>
<div class="center">自适应</div>
<div class="bottom">定高</div>
</div>

2、函数calc()
calc() = calc(四则运算) #用于计算动态值

calc()函数支持 “+”, “-“, “*”, “/” 运算；

calc 在低版本浏览器下存在兼容性问题：

<style>
*{
margin:0;
}
html,body,.content{
height:100%;
}
.top,.bottom{
height:50px;
background-color:red;
}
.center{
height: calc(100% - 100px);;
background-color: antiquewhite;
overflow: auto;
}
</style>
<div class="content">
<div class="top">定高</div>
<div class="center">自适应</div>
<div class="bottom">定高</div>
</div>

3、flex

<style>
*{
margin:0;
}
html,body,.content{
height:100%;
}
.content{
display: flex;
flex-direction: column;
}
.top,.bottom{
height:50px;
background-color:red;
}
.center{
display: flex;
flex: 1;
background-color: antiquewhite;
overflow: auto;
}
</style>
<div class="content">
<div class="top">定高</div>
<div class="center">自适应</div>
<div class="bottom">定高</div>
</div>

4、grid

<style>
*{
margin:0;
}
html,body,.content{
height:100%;
}
.content{
display: grid;
grid-template-rows: 50px auto 50px;
}
.top,.bottom{
height:50px;
background-color:red;
}
.center{
overflow: auto;
background-color: antiquewhite;
}
</style>
<div class="content">
<div class="top">定高</div>
<div class="center">自适应</div>
<div class="bottom">定高</div>
</div>

# 内容较少时，页面的footer始终显示在底部，内容超过一屏时，放在内容后面

<style>
*{
margin:0;
}
html,body{
height:100%;
}
.page-container{
min-height: 100%;
position: relative;
}
.page-main{
width: 100%;
height: auto;
overflow: hidden;
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right:0;
height:50px;
background-color:red;
}
</style>
<div class="page-container">
<div class="page-main"></div>
<!--<div style="height:2000px;">内容过多时</div>-->
<div class="footer"></div>
</div>