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>