固定顶部导航栏和左侧边栏滚动条为右下方的一类布局分析 - Oshyn —— 乐而学，学而乐 - CSDN博客

在管理界面或者一些需要固定显示信息的界面，经常遇到这样的布局：顶部导航栏固定不动，左侧有一个侧边栏用来显示详细信息，右下侧为主要内容所在区域。如下图所示：
这里写图片描述
这是需要达到的目标效果。其中Header和SideNav部分之间用固定定位实现就可以了，但是MainContent部分右侧的scroll bar确实不太好处理，主要存在两个问题：
- 按照普通的方式基本都会铺满右侧整个可视区域，这使得顶部的Header的右侧有了一个滚动条区域，这对于顶部固定这个效果反差太明显。
- 第二个问题是，如果Main Content内容不足一格屏幕大小，那么最好要右侧内容撑满一个屏幕比较好。

绝对定位实现

撑开整个屏幕

为了撑开整个屏幕，需要设置html标签的高度为100%，然后挨个设置body和Main Content的高度和宽度，同时整个布局以body为基准，但是，也可以使用绝对定位撑开页面。
使用的html如下：

    <body>
        <header>
            header
        </header>
        <aside>Side Nav</aside>
        <section id="main">
            <div id="con">
                <div style="height:800px">content 1!</div>
                <div style="height:200px">content 2!</div>
                <div style="height:200px">content 3!</div>
            </div>
        </section>
    </body>

Header和Side Nav如下：

*{padding:0;margin:0;border:none;}
body{
    font-size:14px;
    font-family:"微软雅黑";
}
header{
    width:100%;
    height:80px;
    position:absolute;
    top:0;
    left:0;
    right:0;
    background-color:#123;
    color:#fff;
}
aside{
    width:300px;
    position:absolute;
    top:80px;
    left:0;
    bottom:0;
}

MainContent也是需要用一层来撑开，但是使用的是绝对定位：

#main{
    position: absolute;
    left: 300px;
    top: 80px;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

最后的内层内容层，也需要设置height:100%和overflow：

#con{
    height:100%;
    overflow:auto;

    /*或者
    *overflow-x:hidden;
    *overflow-y:scroll;
    */

    background-color:#789;
    color:#fff;
}

这种方式是douyutv.com的页面布局使用的方式，本人也是在看视频的时候无意注意到这个点 douyutv.com。

“怪异”盒模型border-box实现

box-sizing属性

css的box-sizing属性用来设置或检索对象的盒模型组成模式。取值有如下两个：
- content-box：
_padding和border不被包含在定义的width和height之内_。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )
此属性表现为标准模式下的盒模型。
- border-box：
_padding和border被包含在定义的width和height之内_。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
此属性表现为“怪异”模式下的盒模型。

布局实现

使用的html如下：

    <body>
        <header>
            header
        </header>
        <aside>Side Nav</aside>
        <section id="main">
            <div id="con">
                <div style="height:800px">content 1!</div>
                <div style="height:200px">content 2!</div>
                <div style="height:200px">content 3!</div>
            </div>
        </section>
    </body>

html标签和body标签都需要设置高度用来撑开浏览器界面：

    *{padding:0;margin:0;border:none;}
    html{
        height:100%;
        width:100%;
    }
    body{
        height:100%;
        width:100%;
        font-size:14px;
        font-family:"微软雅黑";
    }

Header和Side Nav使用fixed定位方式固定：

header{
    width:100%;
    height:80px;
    position:fixed;
    top:0;
    left:0;
    right:0;
    background-color:#123;
    color:#fff;
}
aside{
    width:300px;
    position:fixed;
    top:80px;
    left:0;
    bottom:0;
}

Main Content部分首先有一个section层继承body的高度和宽度撑开整个可视页面，需要使用width:100%和height:100%，然后就需要使用padding将Header和Side Nav部分空出。因此就需要使用“怪异”模式下的盒模型，否则就会在右侧出现滚动条。

#main{
    width:100%;
    height:100%;
    padding:80px 0 0 300px;
    box-sizing:border-box;
}

这里height设置为100%之后就是页面可视区域的高度，超过之后就会出现滚动条。因此，这个#main层只是撑开可视区域的作用，内容必须在其子元素下#con进行设置。

#con{
    height:100%;
    overflow:auto;
    background-color:#789;
    color:#fff;
}

必须要注意的是，这里设置#con元素的高度之后，继承的是父元素#main的高度，也就是可视区域除去padding-top的80像素之后的高度，超过这个高度之后要设置overflow为auto显示滚动条才行：
这里写图片描述

如果不设置overflow，那么这个元素会继承父元素一直到body元素，然后就会出现右侧出现延伸到顶部的滚动条。如下图：
这里写图片描述

当然，也可以设置父元素overflow为auto，然后设置其overflow-y为为auto，禁用overflow-x。

Original url: Access
Created at: 2019-03-13 13:43:21
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论