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

• 先放效果图

  

header和footer是固定高度，固定在顶部和尾部

中间的分为左右两块，高度自适应

css:
        *{
            margin: ;
            padding: ;
        }
        header{
            width: %;
            height: px;
            border: px black solid;
            position: absolute;
            top:;
            background-color: #ccc;
        }
        .logo{
            width: px;
            height: px;
            margin: px;
            float: left;
            border: px black solid;
        }
        header input{
            float: right;
            margin-top: px;
        }

        .content{
            position: absolute;
            right: px;
            top: px;
            left: ;
            bottom: px;
            background-color: green;
        }
        .aside{
            position: absolute;
            top: px;
            bottom: px;
            right: ;
            width: px;
            background-color: orange;
        }
        footer{
            position: absolute;
            bottom: px;
            width: %;
            height: px;
            border: px 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 - 宽度px</div>
    <footer>footer</footer>
</div>