本文介绍了如何实现顶部导航栏固定、左侧边栏滚动条位于右下方的布局。通过绝对定位和设置box-sizing属性，解决布局中滚动条位置和内容不足一屏时的填充问题。同时讲解了content-box与border-box两种盒模型的区别及其在布局中的应用。
在管理界面或者一些需要固定显示信息的界面，经常遇到这样的布局：顶部导航栏固定不动，左侧有一个侧边栏用来显示详细信息，右下侧为主要内容所在区域。如下图所示：
这是需要达到的目标效果。其中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:
最低0.47元/天 解锁文章
扫一扫
3310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
