几种css全屏布局的解决方案

上下定高满屏布局

此类布局在工作中是非常常见，常用于管理平台

1、absolute

<style>
    *{
        padding:0;
        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()函数支持 “+”, “-“, “*”, “/” 运算；

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

<style>
    *{
        padding:0;
        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
使用flex进行全局布局时，会因为性能问题出现，出现卡断。

<style>
    *{
        padding:0;
        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
使用display：grid把容器元素定义为一个网格，使用grid-template-columns和grid-template-rows设置列和行大小，然后使用grid-column 和 grid-row把它的子元素放入网格

<style>
    *{
        padding:0;
        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>
    *{
        padding:0;
        margin:0;
    }
    html,body{
        height:100%;
    }
    .page-container{
        min-height: 100%;
        position: relative;
    }
    .page-main{
        width: 100%;
        padding-bottom: 50px;
        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>