css：min-height不相容於火狐瀏覽器的解決方法

我們在進行頁面架構的時候，一般會分成三個section：header、body、footer。如下面這個頁面：

這時候我們就需要對body部分進行最小高度設置，才能避免footer部分出現在頁面中間的情況。比方說下面在這個寫法：

.page-content-header {    　　
min-height: 5%;
}
.page-content-body {    　　
min-height: 100%;}
.page-content-footer {    　　
min-height: 5%;}

這樣的寫法會讓body部分有個充滿頁面大小的高度，footer部分自然會在頁面的最低端，而且當body部分的內容超出了100%時，高度會自動撐開，不會出現溢出的狀況。

但是，問題來了，火狐瀏覽器不相容於這種寫法，min-height：100% 完全不生效，我們可以用以下方法來進行相容：

.page-content-body {    　　
min-height: 100%;    　　
/*火狐兼容*/    　　
min-height: 600px !important;}
.page-content-body:after {   　　
content:"";　　
visibility:hidden;　　
display:block;　　
clear:both;　　
height:0px;}

#首先我們用 !important 來對火狐瀏覽器做hack，設定一個最小高度600px，然後利用偽元素:after來做樣式清除，以達到當內容超出最小高度時，高度會相應增加的目的。

我們設定顯示框類型display為區塊級元素block，設定clear為左右兩側都不允許浮動元素，我們插入的生成內容content為空，然後設定高度為0，將元素設為不可見。

這樣就能讓Firefox也能達到最小高度和內容超出自適應了。

#

以上是css：min-height不相容於火狐瀏覽器的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！