美文网首页让前端飞
前端web网站上中（左右）下布局(flex、calc)

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

作者: Silence11 | 来源:发表于2017-08-12 16:53 被阅读0次

基本布局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">左侧</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>

效果如下：

one.png

基本布局2： 上中（左中右,左、右侧固定）下布局

<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>

效果如下：

two.png

相关文章

网友评论

    本文标题：前端web网站上中（左右）下布局(flex、calc)

    本文链接：https://www.haomeiwen.com/subject/zcsjrxtx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    让前端飞

    关于我们|服务条款|联系我们|前端web网站上中（左右）下布局(flex、calc)|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！