02-PC端自适应

要求：用于后台管理系统，一屏内自适应

1. 左右两栏，左侧定宽，右侧自适应

<style>
    * {margin: 0;padding: 0;}
    html, body {width: 100%;height: 100%;}
    .left {
        width: 200px;
        height: 100%;
        float: left;
        background: #f00;
    }
    .right {
        height: 100%;
        background: #0f0;
        overflow-x: hidden;
        overflow-y: auto;
    }
</style>
<div class="left"></div>
<div class="right"></div>

利用BFC的原理解决，html不会产生滚动条，div.right会产生局部竖向滚动条

2.上下两栏，上栏定高，下栏自适应

<style>
    /* 方法一 */
    /** {margin: 0; padding:0;}
    html, body, .wrap {width: 100%; height: 100%;}
    .wrap {position: relative;}
    .top {
        height: 100px;
        width: 100%;
        background: #f00;
    }
    .bottom {
        width: 100%;
        position: absolute;
        top: 100px;
        bottom: 0;
        background: #0f0;
    }*/
    /* 方法二 */
    * {margin: 0; padding:0;}
    html, body, .wrap {width: 100%; height: 100%;}
    .wrap {
        padding-top: 100px;
        box-sizing: border-box;
        position: relative;
    }
    .top {
        height: 100px;
        width: 100%;
        background: #f00;
        position: absolute;
        top: 0;
        left: 0;
    }
    .bottom {
        width: 100%;
        height: 100%;
        background: #0f0;
    }

</style>
<div class="wrap">
    <div class="top"></div>
    <div class="bottom"></div>
</div>

3. 上左右三栏布局，上定高、左定宽，右自适应

<style>
    * { margin:0; padding: 0; }
    html, body, .wrap { width: 100%; height: 100%; }
    .wrap { position: relative; }
    .top {
        height: 100px;
        width: 100%;
        background: #f00;
    }
    .main {
        width: 100%;
        position: absolute;
        top: 100px;
        bottom: 0;
    }
    .left {
        width: 100px;
        height: 100%;
        float: left;
        background: #00f;
    }
    .right {
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background: #ff0;
    }
</style>
<div class="wrap">
    <div class="top"></div>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</div>

先上下分栏，再左右分栏，div.right可产生局部竖向滚动条

4.左中右三栏布局，左右定宽，中间自适应

html自上而下的解析规则，先确定左右两端，让中间的自适应
注意 div.left、div.right、div.center

<style>
    * {margin:0;padding: 0;}
    html,body {width: 100%;height: 100%;}
    .left {
        float: left;
        width: 100px;
        height: 100%;
        background: #f00;
    }
    .right {
        float: right;
        width: 100px;
        height: 100%;
        background: #f00;
    }
    .center {
        height: 100%;
        overflow: hidden;
        background: #0f0;
    }
</style>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>

5.上下（左中右）布局，上、左、右确定

<style>
    * {margin:0;padding:0;}
    html, body, .wrap {width:100%;height: 100%;}
    .top {
        width: 100%;
        height: 120px;
        background: #f00;
    }
    .main {
        width: 100%;
        position: absolute;
        top: 120px;
        bottom: 0;
    }
    .left {
        float: left;
        width: 120px;
        height: 100%;
        background: #00f;
    }
    .right {
        float: right;
        width: 120px;
        height: 100%;
        background: #00f;
    }
    .center {
        height: 100%;
        background: #0f0;
        overflow-x: hidden;
    }
</style>
<div class="wrap">
    <div class="top"></div>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
</div>

6.上中（左中右）下布局

<style>
    * {margin:0;padding:0;}
    html, body, .wrap {width:100%; height:100%;}
    .wrap {
        position: relative;
    }
    .top {
        width: 100%;
        height: 120px;
        background: #f00;
    }
    .main {
        position: absolute;
        top: 120px;
        bottom: 120px;
        width: 100%;
    }
    .bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 120px;
        background: #00f;
    }
    .left {
        float: left;
        width: 120px;
        height: 100%;
        background: #ff0;
    }
    .right {
        float: right;
        width: 120px;
        height: 100%;
        background: #ff0;
    }
    .center {
        height: 100%;
        overflow: hidden;
        background: #0f0;
    }
</style>
<div class="wrap">
    <div class="top"></div>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
    <div class="bottom"></div>
</div>

参考文章：https://blog.csdn.net/qq_35363709/article/details/96475117