前端web網站上中（左右）下佈局(flex、calc)

時間 2019-12-05

標籤前端 web 網站左右佈局 flex calc 欄目 HTML 简体版

原文原文鏈接

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

<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">左側</div>
             <div class="right">
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
                <div>超太高度出現滾動條</div>
             </div>
        </div>
        <footer>底部</footer>
    </div>
</body>

效果以下：佈局

基本佈局2：上中（左中右,左、右側固定）下佈局flex

<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">左側</div>
        <div class="center-s">
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
            <div>超太高度出現滾動條</div>
        </div>
        <div class="right">右側</div>
    </div>
    <footer>底部</footer>
</div>
</body>