弹性布局

        <div class="box">
            <div class="box-header">欢迎来到</div>
            <div class="box-content">
                <div>啦啦啦啦</div>
                <ul class="downla">
                    <li>红</li>
                    <li>绿</li>
                    <li>黄</li>
                </ul>
                <div>哈哈哈哈</div>
            </div>
            <div class="box-footer">
                <ul>
                    <li>壹</li>
                    <li>贰</li>
                    <li>叁</li>
                    <li>肆</li>
                </ul>
            </div>
        </div>

        *{
            margin: 0;
            padding: 0;
        }
        html,body,.box{
            height: 100%;
            min-width: 500px;
        }
        .box-header{
            height: 150px;
            line-height: 150px;
            background: #f60;
            text-align: center;
            font-size: 2rem;
            color: #fff;
        }
        .box{
            display: flex;
            flex-direction: column;
        }
        .box-content{
            flex: 1;
            font-size: 2rem;
            border: 1px solid greenyellow;
        }
        .downla{
            font-size: 3rem;
        }
        .box-footer{
            height: 150px;
            line-height: 150px;
            background: #f60;
            text-align: center;
            font-size: 2rem;
            color: #fff;
        }
        .box-footer ul{
            width: 100%;
            
        }
        .box-footer ul li{
            list-style: none;
            display: inline-block;
            width: 25%;
            float: left;
        }