Css布局系列-上下两栏布局_html/css_WEB-ITnose
程序员文章站
2022-04-21 11:21:20
...
上下两栏布局,这个在做信息系统的时候我感觉用得比较多。结合前面布局的介绍,改天给介绍一个稍微比较复杂的真实信息系统布局。请看效果图:
要点:最顶一栏给其固定高度,下面一栏高宽度让其自撑,如果该栏的内容溢出,设置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;}
上下布局,下面高度自撑。
上一篇: php根据地理坐标获取国家、省份、城市,及周边数据类
下一篇: 总结js常用函数和常用技巧
推荐阅读
-
[转]CSS3 Media Query实现响应布局_html/css_WEB-ITnose
-
HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中_html/css_WEB-ITnose
-
DIV+CSS布局问题_html/css_WEB-ITnose
-
DIV+CSS三列式布局的实现方法_html/css_WEB-ITnose
-
求高手,模仿百度页面,页面缩小之后为什么排版都变了,应该怎样布局才不会乱!_html/css_WEB-ITnose
-
CSS常用布局整理(二)_html/css_WEB-ITnose
-
Bootstrap栅格布局系统的特点_html/css_WEB-ITnose
-
CSS实现两栏布局
-
前端基础??CSS+DIV布局_html/css_WEB-ITnose
-
?4种实现多列布局css_html/css_WEB-ITnose