您当前的位置: 首页 > 前端教程 > CSS教程 > CSS中最小高度min-height的用处

CSS中最小高度min-height的用处

作者:不详 来源:网络 发布时间: 2010-06-09 18:42 点击:
最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸,但到目前为止,只有Opera和Mozilla支持,IE7开始也支持了,如何在现有基础上(IE680-90%)合理、妙用最小高度了? 假定有二个BOX,我们需要它的最小高度为150PX。

CSS中最小高度min-height的用处

  最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸,但到目前为止,只有Opera和Mozilla支持,IE7开始也支持了,如何在现有基础上(IE680-90%)合理、妙用最小高度了?
  
  假定有二个BOX,我们需要它的最小高度为150PX。
  
  CSS:
  
  div.box1,div.box2{
  
  width:300px;
  
  min-height:150px;
  
  background:#EEE;
  
  float:left;
  
  margin-right:20px;
  
  }
  
  xhtml:
  
  <div>IE中没保持最小高度为150px</div>
  
  <div>最小高度可以设定一个BOX的最小高度,
  
  当其内容较少时时,也能保持BOX的高度为一定</div>
  
  现在的效果,IE中没保持最小高度为150px。解决的方法,为IE设定一个高度。
  
  *htmldiv.box1,*htmldiv.box2{height:150px;}
  
  你也可以采用CSS的属性选择符(AttributeSelectors)
  
  div.box1,div.box2{......height:150px;}
  
  /*IE靠这保持最小高度,超出就自动向下延伸*/
  
  div[class].box1,div[class].box2{height:auto;}
  
  /*具有类选择符(class)属性的DIV对象*/
  
  IE自然又是不支持的啦,Opera和Mozilla支持,读取这个高度。可应用场合:搜索、文章等页面(没采用100%高度,当搜到的内容较少时,不至于页面太短。

分享到:
本文"CSS中最小高度min-height的用处"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(0)
0%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4