首頁 > web前端 > css教學 > 主體

元素的高度自適應

高洛峰
發布: 2016-10-09 14:05:46
原創
1362 人瀏覽過

元素的高度自適應

網頁佈局中有時候有的高度需要根據內容調整,所以不能固定,今天就來說說,最小高度自適應

屬性:min-height 最小高度,但IE6不識別該屬性,height在IE6中類似min-height屬性;

以下是解決BUG問題方法:

hack1:min-height:value; _height:value;(IE6能辨識下劃線"_"和星號" * ", IE7能辨識星號" * ",但無法辨識底線"_",而firefox兩個都不能認識)

hack2:min-height:value; _height:auto !important; height:value;(建議使用)

min-height 最小高度

max-height 最大高度

min-width最小寬度

max-width 最大寬度

 

浮動元素的高度自適應度包含了浮動元素,那麼它的高度就會出現塌陷問題,解決高度塌陷的問題很簡單,可以浮動父級元素、清除法等等,均可實現

hack1:為父元素添加浮動屬性:float;

hack2:為父元素新增屬性:overflow:hidden;

hack3:在浮動元素下方新增一個空的div,並給此元素新增屬性:clear:both;height:0;overflow:hidden;

hack33 :給父元素添加此聲明(推薦使用)

父元素:after{content:".";  height:0;  display:block;  overflow:hidden;  clear:both;  visibility:hidden;}

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板