展会信息港展会大全

css div设定最小高度又自适应高度
来源:互联网   发布日期:2016-03-25 15:54:53   浏览:1556次  

导读:经常使用div布局的盆朋友应该有过这样的经验,并且这样的情况并不少见:有一个 div,当它里面的内容超过它的高度时,让这个 div 的高度随内容自动变化(自适应),但是如果内容很少时,又想让...

经常使用div布局的盆朋友应该有过这样的经验,并且这样的情况并不少见:有一个 div,当它里面的内容超过它的高度时,让这个 div 的高度随内容自动变化(自适应),但是如果内容很少时,又想让这个 div 的高度保持一个固定的最小值,这样问题就来了,我们都知道,div 在 IE7、IE8、Firefox、Opera 和 chrome 中不设置高度(或者 height:auto )的情况下,其高度是自适应的,但如果设了高度,超出部分会自动隐藏,既(overflow:hidden),但是 IE6 这小子可不吃这一套,即使设置了高度,内容超过它的高度时也会自动被撑开。

现在,我们假设这个div的高度是240像素,对于这种情况,我们可以使用:

.mydiv {

height:auto !important;

height:240px;

min-height:240px

}

说明:

IE6 识别不了 height:auto !important 和 min-height:240px,因此它的高度是240px,前面说过,IE6内容超出时 div 的高度会随着内容的高度页变(自适应),IE7、Firefox、Opera、Chrome 可以识别 height:auto !important ,注意这个!important 关健字在 CSS 中的优先性是大于后面的 height:240px 的,因此它的渲染结果中只接受了 height:auto !important 和 min-height:240px ,这一句就可以理解为 height:auto, min-height:240px ,就这样,很简单吧。

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港