QQ 1640076782

2013年09月28日

div+css 中min-height属性该如何使用

Filed under: 猪哥,英语网站设计 — 标签:, — lifengwu @ 1:46 下午
min-height属性主要设定一个层或基他标签的最小高度,当内容较少的时候,也能保持一定的高度,超出就自动向下延伸,这是我们都想要的效果,但是由于浏览器众多,每一个
浏览器对此的解释也不一样,就造成了不同浏览器下的效果不一样的情况,因此在使用的时候也必须要多做测试。
假定有二个层DIV(div1和div2),我们都设置最小高度为200PX。
下面是CSS代码:
div.ceng1,div.ceng2{width: 300px; min-height: 200px;background: #ccc;float: left;margin-right: 20px;}
下面是HTML代码:
<div>IE6中没保持最小高度为200px</div>
<div>所有IE支持保持最小高度为200px</div>
由于IE6及部分IE7版本中没保持最小高度为200px。
我们可以通过css hack来设定IE6高度
下面是CSS代码:
div.ceng1,div.ceng2{width: 300px; min-height: 200px;background: #EEE;float: left; margin-right: 20px;}
div.ceng2{*height:auto !important;*height:200px; min-height: 200px;}
如此,就可以解决了!
小提示:
*height:auto !important;*height:200px;来区别IE6,IE7,及其它浏览器来实现兼容最小高度-你可能需要了解CSS hack之区别不同浏览器的写法。

min-height属性主要设定一个层或基他标签的最小高度,当内容较少的时候,也能保持一定的高度,超出就自动向下延伸,这是我们都想要的效果,但是由于浏览器众多,每一个
浏览器对此的解释也不一样,就造成了不同浏览器下的效果不一样的情况,因此在使用的时候也必须要多做测试。
假定有二个层DIV(div1和div2),我们都设置最小高度为200PX。
下面是CSS代码:div.ceng1,div.ceng2{width: 300px; min-height: 200px;background: #ccc;float: left;margin-right: 20px;}
下面是HTML代码:<div>IE6中没保持最小高度为200px</div><div>所有IE支持保持最小高度为200px</div>
由于IE6及部分IE7版本中没保持最小高度为200px。
我们可以通过css hack来设定IE6高度

下面是CSS代码:div.ceng1,div.ceng2{width: 300px; min-height: 200px;background: #EEE;float: left; margin-right: 20px;}div.ceng2{*height:auto !important;*height:200px; min-height: 200px;}
如此,就可以解决了!

小提示:*height:auto !important;*height:200px;来区别IE6,IE7,及其它浏览器来实现兼容最小高度-你可能需要了解CSS hack之区别不同浏览器的写法。