CSS中最小高度(min-height)的妙用

撒旦徔戟

撒旦徔戟

2016-02-19 21:22

下面图老师小编跟大家分享一个简单易学的CSS中最小高度(min-height)的妙用教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

  最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸,但到目前为止,只有Opera 和 Mozilla 支持,IE7开始也支持了,但IE7处于测试阶段,等正式版发布到普及需一段也许比较长的时间,除非MS把它捆绑在某个操作系统上,如何在现有基础上(IE6 80-90%),合理、妙用最小高度了?

    假定有二个BOX,我们需要它的最小高度为150PX。

    CSS:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

     div.box1,div.box2{
         width: 300px;
         min-height: 150px;
         background: #EEE;
         float: left;
         margin-right: 20px;
         }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

    xhtml:
divIE中没保持最小高度为150px/div
div最小高度可以设定一个BOX的最小高度,
当其内容较少时时,也能保持BOX的高度为一定/div

    现在的效果,IE中没保持最小高度为150px。解决的方法,为IE设定一个高度。
* html div.box1,* html div.box2{height: 150px;}

    你也可以采用CSS的属性选择符(Attribute Selectors)
div.box1,div.box2{ ......height: 150px;}
/* IE靠这保持最小高度,超出就自动向下延伸 */
div[class].box1,div[class].box2{height: auto;} 
/* 具有类选择符(class)属性的DIV对象 */ 

    IE自然又是不支持的啦,Opera 和 Mozilla 支持,读取这个高度。可应用场合:搜索、文章等页面(没采用100%高度,当搜到的内容较少时,不至于页面太短。

展开更多 50%)
分享

猜你喜欢

CSS中最小高度(min-height)的妙用

Web开发
CSS中最小高度(min-height)的妙用

CSS布局中最小高度(min-height)的妙用

Web开发
CSS布局中最小高度(min-height)的妙用

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS:line-height

Web开发
CSS:line-height

爱情中最小白的星座女是谁

十二星座 星座
爱情中最小白的星座女是谁

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

最小高度100%页脚保持在底部的布局方法

Web开发
最小高度100%页脚保持在底部的布局方法

CSS基础知识:padding与line-height的区别

Web开发
CSS基础知识:padding与line-height的区别

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

哪些电源具有LCD适配器的功能

哪些电源具有LCD适配器的功能

MySQL入门学习(三)学习篇

MySQL入门学习(三)学习篇
下拉加载更多内容 ↓