css经典布局——头尾固定高度中间高度自适应布局

• 先放效果图
  
  

header和footer是固定高度，固定在顶部和尾部
中间的分为左右两块，高度自适应

css:        *{            margin: 0;            padding: 0;        }        header{            width: 100%;            height: 100px;            border: 1px black solid;            position: absolute;            top:0;            background-color: #ccc;        }        .logo{            width: 80px;            height: 80px;            margin: 10px;            float: left;            border: 1px black solid;        }        header input{            float: right;            margin-top: 70px;        }        .content{            position: absolute;            right: 210px;            top: 110px;            left: 0;            bottom: 110px;            background-color: green;        }        .aside{            position: absolute;            top: 110px;            bottom: 110px;            right: 0;            width: 200px;            background-color: orange;        }        footer{            position: absolute;            bottom: 0px;            width: 100%;            height: 100px;            border: 1px black solid;            background-color: #ccc;        }HTML:<div class="container">    <header>        <div class="logo">logo</div>        <input type="text" placeholder="用户名">    </header>    <div class="content">content - 自适应宽度</div>    <div class="aside">aside - 宽度200px</div>    <footer>footer</footer></div>