css: min-height is not compatible with Firefox browser solution

When we structure the page, we usually divide it into three sections: header, body, and footer. Such as the following page:

#At this time we need to set the minimum height of the body part to avoid the footer part appearing in the middle of the page. For example, the following writing method:

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

This writing method will make the body part have a height that fills the page size. The footer part will naturally be at the lowest end of the page, and when the content of the body part exceeds 100% , the height will automatically expand and there will be no overflow.

However, here comes the problem. Firefox browser is not compatible with this writing method. min-height: 100% will not take effect at all. We can use the following method to make it compatible:

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

First we use !important to hack the Firefox browser, set a minimum height of 600px, and then use the pseudo element: after to do style clearing, so that when the content exceeds the minimum height, the height will increase accordingly.

We set the display box type display to block-level element block, set clear to allow floating elements on both left and right sides, and insert the generated content The content is empty, then the height is set to 0, making the element invisible.

#This will allow Firefox to achieve minimum height and content beyond adaptive adaptability.

The above is the detailed content of css: min-height is not compatible with Firefox browser solution. For more information, please follow other related articles on the PHP Chinese website!