Css布局系列-上下两栏布局
浏览数：202 /
时间：2015年06月09日
上下两栏布局，这个在做信息系统的时候我感觉用得比较多。结合前面布局的介绍，改天给介绍一个稍微比较复杂的真实信息系统布局。请看效果图：
要点：最顶一栏给其固定高度，下面一栏高宽度让其自撑，如果该栏的内容溢出，设置overflow属性为auto，允许其出现滚动条。下面一栏必须给设置绝对定位，他top的距离就是等于顶栏的高度且bottom等于0，就会自动拉升高度。
*{margin: 0;padding: 0;}
html, body{height: 100%;}
.container{height: 100%;}
.top{width: 100%;height: 60px;background-color: #241fed;}
.middle{width: 100%;top: 60px;background-color: #e30;position: absolute;bottom: 0;overflow: auto;}
<div class="container">
<div class="top">
</div>
<div class="middle">
上下布局，下面高度自撑。
</div>
</div>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
