css布局

上下布局：下面固定高度，下面自适应

    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .div1 {
            position: relative;
            height: 60%;
            width: 500px;
            background: lightblue;
        }

        .div1_1 {
            width: 100%;
            height: 50px;
            background: lightcoral;
        }

        .div1_2 {
            position: absolute;
            top: 50px;
            bottom: 0;
            width: 80%;
            background: lightgrey;
            overflow: auto;
        }

        .div1_2_1 {
            height: 1000px;
        }
    </style>

<div class="div1">
    <div class="div1_1"></div>
    <div class="div1_2">
        <div class="div1_2_1"></div>
    </div>
</div>