上下布局高度自适应屏幕

要求上下布局： 高度撑满整个屏幕

html

<div class="layout">
    <div class="header">111111</div>
    <div class="content"></div>
</div>

• 方法一： 使用position：absolute定位脱离文档流的原理来实现。

 <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }

        .layout {
            width: 100%;
            height: 100%;
        }

        .header {
            background: #7AFFAF;
            height: 100px;
        }

        .content {
            background: #7A88FF;
            width: 100%;
            position: absolute;
            top: 100px;
            left: 0;
            bottom: 0;
        }
    </style>

• 方法二：使用box-sizing:border-box属性，设置padding和负值margin来实现

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
        }

        .layout {
            width: 100%;
            height: 100%;
            padding: 100px 0 0;
            box-sizing: border-box;
        }

        .header {
            background: #7AFFAF;
            height: 100px;
            margin: -100px 0 0;
        }

        .content {
            background: #7A88FF;
            height: 100%;
        }
    </style>

• 方法三：box-sizing+position：absolute实现

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
        }

        .layout {
            width: 100%;
            height: 100%;
            padding: 100px 0 0;
            box-sizing: border-box;
        }

        .header {
            background: #7AFFAF;
            height: 100px;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .content {
            background: #7A88FF;
            height: 100%;
        }
    </style>

• 方法四：使用calc直接计算，但是要注意，曾祖父元素，父元素，子元素均需设置height:100%

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
        }

        .layout {
            width: 100%;
            height: 100%;
        }

        .header {
            background: #7AFFAF;
            height: 100px;
            width: 100%;
        }

        .content {
            background: #7A88FF;
            height: calc(100% - 100px);
        }
    </style>