码迷,mamicode.com
首页 > 其他好文 > 详细

固定顶部导航栏和左侧边栏滚动条为右下方的一类布局分析

时间:2015-08-16 15:18:03      阅读:1793      评论:0      收藏:0      [点我收藏+]

标签:css布局   滚动条   

在管理界面或者一些需要固定显示信息的界面,经常遇到这样的布局:顶部导航栏固定不动,左侧有一个侧边栏用来显示详细信息,右下侧为主要内容所在区域。如下图所示:
技术分享
这是需要达到的目标效果。其中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。

版权声明:本文为博主原创文章,未经博主允许不得转载。

固定顶部导航栏和左侧边栏滚动条为右下方的一类布局分析

标签:css布局   滚动条   

原文地址:http://blog.csdn.net/u010487568/article/details/47701983

(0)
(2)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!