CSS中DIV盒子设置最小高度值并自适应高度

一般来说,想让一个DIV盒子的高度能够根据盒子内的内容自动调整,不设置盒子的高度值(height)就行了。

但还有一种情况:为了使盒子布局美观,需要对盒子设置一个初始高度,当盒子中的内容很少时,保持这个初始高度,如果内容超过该盒子初始高度的容量,则盒子的高度根据内容自动调整增高。所以这时需要设置一个具体的DIV盒子高度值,又要使其能够在超过初始高度时自适应。

具体解决办法是(假设DIV盒子的初始高度是500px):

#columnMain{

min-height:500px;

height:auto !important;

height:500px;

}

这里,height:500px;适用于IE6,因为IE6不认识前两条CSS语句,但height:500px;对IE6足够了,因为IE6的渲染办法是当已设置的实际高度不够用时,会自动撑开盒子的高度;前两条CSS语句min-height:500px;height:auto !important;是对IE7+、Chrome、FF和Oprea用的,这些版本的浏览器使用min-height:500px;设置了最小高度,如果超过了最小高度,则使用height:auto !important;自动调整高度,注意这条CSS语句中有!important,所以它的优先性是超过其后的height:500px;的。

至此,问题解决。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,052评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 2,083评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,414评论 0 11
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,343评论 0 8
  • CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与F...
    年轻人多学点阅读 401评论 0 7

友情链接更多精彩内容