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

2016-02-19 21:22 7 1 收藏

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

【 tulaoshi.com - Web开发 】

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

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

    CSS:

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

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

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

    现在的效果,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对象 */ 

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

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

来源:http://www.tulaoshi.com/n/20160219/1626015.html

延伸阅读
标签: Web开发
CSS* { margin:0; padding:0; list-style:none;  }  #vertical_box { width:100%; display:table; border:1px red solid; height:400px; /*针对IE的hack*/ *position:relative; } #vertical_box_sub { display: table-cell; vertical-align: middle; /*针对IE的hack*/ *position:absolute; *top:50%; } #vertical_box_container { fo...
自适应高度的问题,采用 Div + CSS 进行三列或二列布局时,事先不知道具体高度,只能根据内容的增减自适应高度,要使两列(或三列)的高度相同,用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了。按照一般的做法,大都采用背景图填充或 JS 脚本的方法使高度相同,但这些都不是最好的办法,我认为… 下面介绍采用“隐藏容器溢出”和“...
标签: Web开发
IE6下默认的字体尺寸大致在 12 – 14px 之间,当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height:4px; 来定义了一个 div 的高度,实际在 IE 下显示的仍然是一个 12 px 左右高度的层。添加overflow: hidden解决问题。 div style=height: 4px; overflow: hidde...
标签: Web开发
当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。 如上一段的代码,很多时候我们会把它所占的位置计算成width:120px,height:120px,因为在正常的理解下,padding是内边距,应该是包括在width里面的,而margin是外边距,所以width=margi...
标签: Web开发
自适应高度的问题,采用 Div + CSS 进行三列或二列布局时,事先不知道具体高度,只能根据内容的增减自适应高度,要使两列(或三列)的高度相同,用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了。按照一般的做法,大都采用背景图填充或 JS 脚本的方法使高度相同,但这些都不是最好的办法,我认为… 下面介绍采用“隐藏容器溢...

经验教程

897

收藏

36
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部