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>