如何使DIV的高度固定,当超出固定高度时,出现自动滚动条
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使DIV的高度固定,当超出固定高度时,出现自动滚动条相关的知识,希望对你有一定的参考价值。
参考技术A使用关键代码:overflow-y: auto,并且限制高度实现功能。
实例演示如下:
1、html代码如下:一个简单的div,暂时内容为空。
css样式如下:
此时页面展示如下:
2、在第一步div加入一些文字,如下:
此时页面展示如下:已自动展现滚动条。
扩展资料:
CSS的overflow 属性解析:
1、定义和用法。
overflow 属性规定当内容溢出元素框时发生的事情。
2、兼容性(浏览器支持)。
所有主流浏览器都支持 overflow 属性,任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
3、属性说明。
属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。
可能的值如下:
布局:上下两个div高度固定,中间自适应
需求:经典布局 —— 头尾固定高度中间高度自适应布局
头部固定高度,宽度100%自适应父容器;
底部固定高度,宽度100%自适应父容器;
中间是主体部分,自动填满,浏览器可视区域剩余部分,内容超出则中间部分出现流动条;
整个内容填满浏览器可视区域,并且不超出此区域!
方法一:position:absolute定位,不设高,并改变"包含块"的尺寸渲染
固定头尾,所以,至少头和尾要用到position定位。因为浏览器大小是可以调节的,而且不同尺寸,不同分辨率的浏览器可视区域的高度是不固定的,
这就决定是中间主体部分的高度不固定。所以真正的问题核心也正在此。解决了这个问题,整个布局也就解决了一多半
最重要的一段就是中间部分绝对定位,top为头的高度,bottom为尾的高度
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>头尾固定中间高度自适应布局</title> <style> html, body { height:100%; margin:0; padding:0 } #dHead { height:100px; background:#690; width:100%; position:absolute; z-index:5; top:0; } #dBody { background:#FC0; width:100%; overflow:auto; position:absolute; z-index:10; top:100px; bottom:100px; } .mycontent { padding:20px; } #dFoot { height:100px; background:#690; width:100%; position:absolute; z-index:200; bottom:0; } </style> </head> <body> <div id="dHead">固定头部100px;</div> <div id="dBody"> <div class="mycontent"> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> </div> </div> <div id="dFoot">固定尾部100px</div> </body> </html>
效果如下:
经测试:IE7+、firefox、chrome、safari、opera均通过测试!
方法二:利用boxsizing改变盒子模型
实现原理是,先为html设定box-sizing然后,加上上下padding值。布局模块均采用position:relative定位。
然后,头部采用负向margin向上平移(因为有了html padding),如查采用负top的话需要为每个布局版加上负top;看实现代码:
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>头尾固定中间高度自适应布局</title> <style type="text/css"> * { margin:0; padding:0; } html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:100px 0; overflow:hidden; } html, body { height:100%; } .top { position:relative; top:-100px; height:100px; background:#f60; } .side { top:-100px; position:relative; height:100%; background:#fc0; overflow:auto; width:200px; float:left; margin-right:0 !important; margin-right:-3px; overflow:auto; } .main { top:-100px; position:relative; overflow:auto; height:100%; background:#f30; } .bottom { top:-100px; position:relative; height:100px; background:#f60; clear:both; } </style> </head> <body> <div class="top"> top </div> <div class="side"> side <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> <div class="main"> main <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br以上是关于如何使DIV的高度固定,当超出固定高度时,出现自动滚动条的主要内容,如果未能解决你的问题,请参考以下文章
css, 怎样使td高度固定,当内容超出设定高度时,超出部分隐藏。
如何使div中的图片自适应宽度和高度,图片不变形,可以超出div,超出部分隐藏