品满屏占满，自适应宽高

考察定位

<div class="main">----------------------宽高和body一样
    <div class="wrapper-up">------------高度一半，宽度一定不要定义
        <div class="div-top"></div>-----宽度一半，利用margin居中
    </div>
    <div class="wrapper-down">----------高度一半
        <div class="div-left"></div>----利用定位
        <div class="div-right"></div>
    </div>
</div>

css样式

html,body {
        padding: 0;
        margin: 0;
        height: 100%;
    }
    .main {
        height: 100%;
        width: 100%;
        background: #A3CFFF;
        position: fixed;
        left: 0;
        top: 0;
    }
    .wrapper-up {
        height: 50%;
    }
    .div-top {
        border: 2px solid #000;
        margin: 0 auto;
        height: 96%;
        width: 50%;
        box-sizing: border-box;
    }
    .wrapper-down {
        height: 50%;
        position: relative;
    }
    .div-left {
        position: absolute;
        left: 0;
        top: 0;
        width: 48%;
        height: 100%;
        border: 2px solid #000;
        box-sizing: border-box;
    }
    .div-right {
        position: absolute;
        right: 0;
        top: 0;
        width: 48%;
        height: 100%;
        border: 2px solid #000;
        box-sizing: border-box;
    }