HTML CSS元素高度自适应_CSS高度自适应浏览器
2016-12-12 12:48:28  By: dwtedx

网页布局中有时候有的高度需要根据内容调整、所以不能固定、今天就来说说、最小高度自适应

属性:min-height 最小高度、但IE6不识别该属性、height在IE6中类似min-height属性


一、HTML高度自适应

方案1

.class_name{
    min-height:value;
    _height:value;
}


注意、IE6能识别下划线"_"和星号" * "、IE7能识别星号" * "、但不能识别下划线"_"、而firefox两个都不能认识


方案2 (建议使用)

.class_name{
    min-height:value;
    _height:auto !important;
    height:value;
}


相关属性

min-height 最小高度
max-height 最大高度
min-width最小宽度
max-width 最大宽度

 

二、浮动元素的高度自适应

如果父元素未设置高度和宽度且它里面包含了浮动元素、那么它的高度就会出现塌陷问题、解决高度塌陷的问题很简单、可以浮动父级元素、清除法等等、均可实现


方案1

给父元素添加浮动属性

.class_name{
    float: left;
}


方案2

给父元素添加属性

.class_name{
    overflow:hidden;
}


方案3

在浮动元素下方添加一个空的div、并给此元素添加属性

.class_name{
    clear:both;
    height:0;
    overflow:hidden;
}


方案4

给父元素添加此声明(推荐使用)

父元素CSS样式

.after_class_name{
    content:"."; 
    height:0; 
    display:block; 
    overflow:hidden; 
    clear:both; 
    visibility:hidden;
}


若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+