前端web網(wǎng)站上中（左右）下布局(flex、calc)

基本布局1: 上中（左右）下布局

<style>
    html,body{
        margin:0;
        height:100%;
        overflow-y: hidden;
    }
    header{
        height: 40px;
        line-height: 40px;
        position: fixed;
        top: 0;
        width: 100%;
        background: #ccc;
    }
    .center{
        width:100%;
        height: 100%;
        background: #eee;
        margin-top: 40px;
        display: flex;
    }
    .left{
        width:20%;
        border-right: solid 1px #ccc;
        height: calc(100% - 80px);
        overflow-y: auto;
    }
    .right{
        width: 80%;
        height: calc(100% - 80px);
        overflow-y: auto;
        padding-left: 19px;
    }
    footer{
        background: #ccc;
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 0;
        width: 100%;
    }
</style>
<body>
    <div style="height:100%">
        <header>頭部</header>
        <div class="center">
             <div class="left">左側(cè)</div>
             <div class="right">
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
                <div>超過高度出現(xiàn)滾動條</div>
             </div>
        </div>
        <footer>底部</footer>
    </div>
</body>

效果如下：

one.png

基本布局2： 上中（左中右,左、右側(cè)固定）下布局

<style>
    html,body{
        margin:0;
        height:100%;
        overflow-y: hidden;
    }
    header{
        height: 40px;
        line-height: 40px;
        position: fixed;
        top: 0;
        width: 100%;
        background: #ccc;
    }
    .center{
        width:100%;
        height: 100%;
        background: #eee;
        margin-top: 40px;
        display: flex;
    }
    .left{
        width:50px;
        border-right: solid 1px #ccc;
        height: calc(100% - 80px);
        overflow-y: auto;
    }
    .right{
        width:50px;
        border-right: solid 1px #ccc;
        height: calc(100% - 80px);
        overflow-y: auto;
    }
    .center-s{
        width: 100%;
        height: calc(100% - 80px);
        overflow-y: auto;
        padding-left: 19px;
    }
    footer{
        background: #ccc;
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 0;
        width: 100%;
    }
</style>
<body>
<div style="height:100%">
    <header>頭部</header>
    <div class="center">
        <div class="left">左側(cè)</div>
        <div class="center-s">
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
            <div>超過高度出現(xiàn)滾動條</div>
        </div>
        <div class="right">右側(cè)</div>
    </div>
    <footer>底部</footer>
</div>
</body>

效果如下：

two.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,716評論 25贊 709
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,018評論 4贊 61
  • 作者:我媽 范水之畔細(xì)觀賞， 心思彷徨暗自傷。 兩岸不見春花放， 滿目景象秋飄蕩！
    風(fēng)隨竹影動閱讀 233評論 2贊 2

友情鏈接更多精彩內(nèi)容