Css:min-height is not compatible with Firefox browser solutions

When we are in the page architecture, we usually divide into three section:header, body, and footer. As the following page:

At this point we need to set the body part to a minimum height to avoid the footer part appearing in the middle of the page. Let's say the following in this notation:

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

This kind of writing will let the body part has a full page size height, the footer part will naturally be at the lowest end of the page, and when the body part of the content exceeds 100%, the height will be automatically open, there will be no overflow situation.

However, the problem comes, Firefox is not compatible with this writing, min-height:100% completely does not take effect, we can use the following methods to be compatible:

. page-content-body {    min-height:100%;    /* Firefox compatible */    min-height:600px!important;}.　　Page-content-body:after {   content: "";　　Visibility:hidden;　　Display:block;　　Clear:both; height:0px;}

First we use!important to do hack to Firefox, set a minimum height of 600px, and then use pseudo-elements: After to do the style cleanup to achieve when the content exceeds the minimum height, the height will increase correspondingly.

We set the Display box type to block-level element block, set clear to not allow floating elements on both sides, we inserted the content of the build is empty, and then set the height to 0, the element is set to invisible.

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