css上下或者上中下 自适应布局

方法就是头部不变，中间和底部绝对定位

            *{
                margin: 0;
                padding: 0;
            }
            div{
                text-align: center;
                font-size: 30px;
            }
            .header,.footer{
                width: 100%;
                height: 100px;
                line-height: 100px;
                background-color: red;
            }
            .content{
                width: 100%;
                position: absolute;
                top: 100px;
                bottom:100px;
                background-color: yellow;
            }
            .footer{
                position: absolute;
                bottom: 0px;
            }

         <div class="header">头部</div>
        <div class="content">内容</div>
        <div class="footer">底部</div>

没有底部了去掉footer,和样式，把content的bottom改成0px就行了