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

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>