css面試題---實現中間自適應高度 左右定寬的佈局

flex佈局實現

這個代碼是面試題解析裏一位大佬的，此處引用一下。

      *{
            margin: 0;
            padding: 0;
        }
        header {
            width: 100%;
            height: 100px;
            background-color: #7ecef3;
        }
        .content {
            width: 100%;
            display: flex;
            position: absolute;
            top: 100px;
            bottom: 100px;
        }
        .left {
            width: 200px;
            background-color: #89c997;
        }
        .middle {
            flex: 1;
            background-color: #53b9be;
        }
        .right {
            width: 200px;
            background-color: #89c997;
        }
        footer {
            width: 100%;
            height: 100px;
            position:absolute;
            bottom: 0;
            background-color: #7ecef3;
        }
 html
	<header></header>
    <dvi class="content">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </dvi>
    <footer></footer>

中間content的部分使用了flex佈局，父元素display屬性設爲flex，中間需要自適應寬度的元素flex設爲1。content部分的高度自適應通過對自身和頁腳設置絕對定位實現。

BFC實現

這個是參考上一個，中間的佈局用BFC實現，就是渲染順序和上面不同，以及需要設置中間的高度爲100%。

   	   *{
            margin: 0;
            padding: 0;
        }
  		header {
            width: 100%;
            height: 100px;
            background-color: #7ecef3;
        }
        .content {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 100px;
            bottom: 100px;
        }
        .left {
            width: 200px;
            height: 100%;
            float: left;
            background-color: aquamarine;
        }
        .right {
            width: 200px;
            height: 100%;
            float: right;
            background-color: aquamarine;
        }
        .middle {
            overflow: hidden;
            height: 100%;
            background-color: cadetblue;
        }
        footer {
            width: 100%;
            height: 100px;
            position:absolute;
            bottom: 0;
            background-color: #7ecef3;
        }
 html
    <header></header>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
        <div class="middle"></div>
    </div>
    <footer></footer>