首页 > web前端 > html教程 > Css布局系列-上下两栏布局_html/css_WEB-ITnose

Css布局系列-上下两栏布局_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:49:30
原创
2549 人浏览过

上下两栏布局,这个在做信息系统的时候我感觉用得比较多。结合前面布局的介绍,改天给介绍一个稍微比较复杂的真实信息系统布局。请看效果图:

要点:最顶一栏给其固定高度,下面一栏高宽度让其自撑,如果该栏的内容溢出,设置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>
登录后复制

  

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板