在管理界面或者一些需要固定显示信息的界面，经常遇到这样的布局：顶部导航栏固定不动，左侧有一个侧边栏用来显示详细信息，右下侧为主要内容所在区域。如下图所示：
这是需要达到的目标效果。其中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。
版权声明：本文为博主原创文章，未经博主允许不得转载。