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就行了