内蒙古十一选5360:css div 高度自适应height

ThinkCSS为大家介绍两种情况下自适应高度样式设置与解决。

第一种:一定高度内容加多时自适应高度,而内容少时内蒙古11选五开奖5号的有一定最小高度;

第二种:没有最小高度,DIV完全自适应高度。

以下为大家介绍这两种情况与解决方法

一、一定最小高度,内容加多时自适应高度,而内容少时DIV有一定最小高度

有一DIV盒子,默认高度为200px,当DIV里内容多余并超出限定高度时,DIV自适应高度, 要求使用纯内蒙古11选五开奖5号的,不需要JS,兼容火狐浏览器

1、回答与解释:

_height:200px; /* css 注解: 仅IE6设别此属性,假定最低高度是200px ,设置高度200px,内容超出后IE6会自动撑高设定高度 */ 
min-height:200px; /* css注释: css最小高度为200px支持所有浏览器,IE6浏览器除外 */

这个设置,ie6,7,8 ,9,10,火狐等都能兼容

2、具体设置代码:

div{ 
_height:200px;
min-height:200px
/* css 注释:两个放置不分前后顺序,兼容所有浏览器 */
}

3、CSS最小高度与自适应高度并存案例
我们设置2个DIV盒子,最小高度均为200px,当内容较少时DIV盒子的最小高度为200px,当内容比较多超出高度能装下时,DIV盒子自适应高度,为了便于观察与参考分析,我们统一设置宽度为100px,一个黑色1px CSS边框。

CSS代码如下:

div{_height:200px; min-height:200px; border:1px solid #000; width:100px} 
/* css注释:设置最小高度,border边框,宽度 */

HTML代码片段:

<div>200高度能装下这点内容,设置最小高度200px</div> 
<div>设置最小高度200px<br />
而内容多,超出200px高度限制,DIV自适应高度<br />
<br />

案例占位<br />
案例占位<br />
案例占位<br />
案例占位<br />
案例占位<br />
案例占位<br />
案例占位<br />
案例占位<br />
案例占位<br />
案例占位<br />
案例占位<br />
案例占位<br />
案例占位
</div>

4、在浏览器案例截图

css自适应高度运用截图
css自适应高度案例截图

在线演示:查看案例

二、CSS默认自适应高度

当我们不对DIV设置固定高度或不设置CSS高度样式,其DIV盒子默认是自适应高度。

三、总结

我们不对DIV设置高度样式,默认情况下是自适应高度,当我们需要设置一个CSS最小高度时,所有浏览器都支持DIV盒子最小高度演示,但IE6不支持min-height样式,我们就需要设置针对IE6的css hack实现,或去了解ie6支持min-width max-width,ie6支持min-height max-height。

相关标签: 自适应 高度 height
如需转载,请注明文章出处和来源网址://www.phlmy.com/jiqiao/499.shtml

日期:2013-05-13 09:29:54 来源:内蒙古11选五开奖5号的 www.phlmy.com 作者:ThinkCSS

热门点击

  • 其实啊也不奇怪,菜做好了先来一份尝尝味道于是提前开吃了。 2019-08-19
  • 十九大精神进机关:原原本本吃透精神 学懂弄通昂扬斗志 2019-08-13
  • 我们是建立市场经济,公有制如何建立市场经济,就要明晰产权,不明晰产权如何建立市场经济? 2019-08-13
  • 2017巴塞尔国际钟表珠宝展 2019-08-11
  • 政务舆情回应如何把握语言分寸感? 2019-08-11
  • 候选案例:机井通电惠民生 2019-08-08
  • 2018年04期 中国国家地理网 2019-08-05
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-07-31
  • 西安外国语大学第二十四届校园文化艺术节闭幕式暨第一届朗读者圆满落幕西安外国语大学第二十四届校园文化艺术节-陕西教育新闻 2019-07-31
  • 俄罗斯世界杯今日开战,送上最全观赛指南!你最看好哪支球队? 2019-07-29
  • 《人民日报》让我爱上了文学(原创首发) 2019-07-29
  • 【北京页川车型报价】北京页川4S店车型价格 2019-07-27
  • 河北沧州经济开发区管理委员会 2019-07-24
  • 强村带弱村结对共发展 2019-07-24
  • 《读药》151期:短篇小说——解读蒋一谈《庐山隐士》 2019-07-15
  • 泛珠三角 分分彩分多少种 彩票35选7开奖查询 内蒙古快3杀号技巧 王中王一肖中特提前开奖 齐鲁福利彩票30选5 上海时时乐走势图最近200期 河南11选5开奖走势图一定牛 贵州十一选五走势电视 香港赛马会九龙集团 2011单机梭哈mame pc28不死挂机模式 领彩票没带面具被杀 cba球队 文队友夸c罗