【CSS】三栏/两栏宽高自适应布局大全

页面布局

注意方案多样性、各自原理、各自优缺点、如果不定高呢、兼容性如何

三栏自适应布局,左右两侧300px,中间宽度自适应

(1) 给出5种方案

• 方案一: float (左右浮动,中间不用给宽,设置margin左右留出位置)

html部分,center放到后面

        <section class="wrapper">
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="content">content</div>
        </section>

css部分

        .wrapper {
            height: 100px;
        }
        .left {
            float: left;
            width: 300px;
            height: 100%;
            background: red;
        }
        .right {
            float: right;
            width: 300px;
            height: 100%;
            background: yellow;
        }
        .content {
            background: skyblue;
            height: 100%;
            margin: 0 300px;
        }

• 方案二: position定位 (中间设置left 300 right 300 ,宽度就自适应了)

html不变

        <section class="wrapper">
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="content">content</div>
        </section>

css部分

        .wrapper {
            position: relative;
            height: 100px;
        }
        .left {
            position: absolute;
            left: 0;
            width: 300px;
            height: 100%;
            background: red;
        }
        .right {
            position: absolute;
            right: 0;
            width: 300px;
            height: 100%;
            background: yellow;
        }
        .content {
            position: absolute;
            left: 300px;
            right: 300px;
            background: skyblue;
            height: 100%;
        }

• 方案三: flex伸缩布局

html不变

        <section class="wrapper">
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="content">content</div>
        </section>

css部分

        .wrapper {
            display: flex;
            height: 100px;
        }
        .left {
            width: 300px;
            height: 100%;
            background: red;
        }
        .right {
            width: 300px;
            height: 100%;
            background: yellow;
        }
        .content {
            flex: 1;
            background: skyblue;
            height: 100%;
        }

• 方案四: 表格布局 (设置父元素为display:table,子元素都是display:table-cell;然后给两边设置width,中间不设置就自动了,记得父元素给width:100%)

html部分,将center改到中间位置

        <section class="wrapper">
            <div class="left">left</div>
            <div class="content">content</div>
            <div class="right">right</div>
        </section>

css部分

       .wrapper {
            display: table;
            width: 100%;
            height: 100px;
        }
        .left {
            display: table-cell;
            width: 300px;
            height: 100%;
            background: red;
        }
        .right {
            display: table-cell;
            width: 300px;
            height: 100%;
            background: yellow;
        }
        .content {
            display: table-cell;
            background: skyblue;
            height: 100%;
        }

• 方案五: 网格布局 Grid第一个专门为解决布局问题而创建的CSS模块 (设置容器类型,然后设置列宽和行高)

html部分不变,center居中

        <section class="wrapper">
            <div class="left">left</div>
            <div class="content">content</div>
            <div class="right">right</div>
        </section>

css部分十分简洁

        .wrapper {
            display: grid;
            width: 100%;
            grid-template-rows: 200px 100px 10px;
            grid-template-columns: 300px auto 300px;
        }
        .left {
            background: red;
        }
        .right {
            background: yellow;
        }
        .content {
            background: skyblue;
        }

(2) 各自的优缺点。

方案一、方案二:

float和position方案的有点是兼容性好,因为都是比较老的解决方案了,
缺点是float之后需要清除浮动造成的影响,
定位的话就是绝对定位之后脱离文档流了,你要注意用position:relative包裹一下

方案三:

flex是目前移动端主流的方案,css的语法,缺点就是IE8以下不支持。

方案四:

语义化不太好,

方案五:

有严重的兼容性问题

(3) 如果不定高,哪些方案会有问题

如果不定高float / 定位的方案会有问题

三栏自适应布局,上下固定,中间高度自适应 (自适应的地方设置top300 bottom300,高度就自适应了)

方案一: 定位

html

    <section class="wrapper">
        <div class="top">top</div>
        <div class="content">content</div>
        <div class="bottom">bottom</div>
    </section>

css

        .wrapper {
            height: 800px;
            position: relative;
        }
        .top {
            position: absolute;
            top: 0;
            height: 100px;
            width: 100%;
            background: red;
        }
        .bottom {
            position: absolute;
            bottom: 0 ;
            height: 100px;
            width: 100%;
            background: blue;
        }
        .content {
            position: absolute;
            top: 100px;
            bottom: 100px;
            width: 100%;
            background: skyblue;
        }

方案二: flex布局

html

    <section class="wrapper">
        <div class="top">top</div>
        <div class="content">content</div>
        <div class="bottom">bottom</div>
    </section>

css

        .wrapper {
            display: flex;
            height: 700px;
            flex-direction: column;
        }
        .top {
            height: 100px;
            background: red;
        }
        .bottom {
            height: 100px;
            background: blue;
        }
        .content {
            flex: 1;
            background: skyblue;
        }

方案三: 网格布局grid (设置grid-template-rows: 300px auto 300px)

html不变

    <section class="wrapper">
        <div class="top">top</div>
        <div class="content">content</div>
        <div class="bottom">bottom</div>
    </section>

css

      .wrapper {
            display: grid;
            height: 700px;
            grid-template-rows: 100px auto 100px;
        }
        .top {
            background: red;
        }
        .bottom {
            background: blue;
        }
        .content {
            background: skyblue;
        }

两栏自适应,右侧固定,左侧自适应

方案一: 利用BFC的渲染规则,BFC不会和浮动的元素互相重叠
html

    <section class="wrapper">
        <div class="right">right</div>
        <div class="left">left</div>
    </section>

css 避免左侧侵入到右侧,给左侧div创建一个BFC,因为BFC的渲染机制就是独立的容器,不会和浮动的元素重叠

        .left {
            height: 200px;
            background: red;
            overflow: hidden;
        }
        .right {
            float: right;
            width: 300px;
            background: blue;
        }

方案二: 定位

html

    <section class="wrapper">
        <div class="left">left</div>
        <div class="right">right</div>
    </section>

css

        .wrapper {
            position: relative;
        }
        .left {
            position: absolute;
            left: 0;
            right: 300px;
            background: red;
        }
        .right {
            position: absolute;
            width: 300px;
            right: 0;
            background: blue;
        }

方案三: flex

html

    <section class="wrapper">
        <div class="left">left</div>
        <div class="right">right</div>
    </section>

css

      .wrapper {
            display: flex;
        }
        .left {
            flex: 1;
            background: red;
        }
        .right {
            width: 300px;
            background: blue;
        }

方案四: 表格布局,注意给父元素表格要设置width:100%

html

    <section class="wrapper">
        <div class="left">left</div>
        <div class="right">right</div>
    </section>

css

        .wrapper {
            display: table;
            width: 100%;
        }
        .left {
            display: table-cell;
            background: red;
        }
        .right {
            display: table-cell;
            width: 300px;
            background: blue;
        }

方案五: grid网格布局

css

        .wrapper {
            display: grid;
            grid-template-columns: auto 300px;
        }
        .left {
            background: red;
        }
        .right {
            background: blue;
        }

html

<section class="wrapper">
        <div class="left">left</div>
        <div class="right">right</div>
    </section>

两栏自适应,上侧固定,下侧自适应

方案一: 定位

设置content部分的top: 100px botton: 0

html

        <section class="wrapper">
            <div class="top">top</div>
            <div class="content">content</div>
        </section>

css

        .wrapper {
            position: relative;
            height: 100%;
            width: 100%;
        }
        .top {
            position: absolute;
            top: 0;
            height: 100px;
            background: red;
            width: 100%;

        }
        .content {
            position: absolute;
            width: 100%;
            top: 100px;
            bottom: 0;
            background: skyblue;
        }

方案二: flex

top高度100px,然后content设置flex: 1

html

        <section class="wrapper">
            <div class="top">top</div>
            <div class="content">content</div>
        </section>

css

               display: flex;
               height: 800px;
           }
           .top {
               height: 100px;
               background: red;

           }
           .content {
               flex: 1;
               background: skyblue;
           }

方案三: grid网格布局

思路,就是设置display:grid后 设置列宽或者行高,有多少列就设置多少个参数,多少行就设多少参数。

html

     <section class="wrapper">
            <div class="top">top</div>
            <div class="content">content</div>
        </section>

css

     .wrapper {
            display: grid;
            height: 800px;
            grid-template-rows: 100px auto;
        }
        .top {
            background: red;
        }
        .content {
            background: skyblue;
        }