Geek asks and answers

CSS: percent min-height element nested in percent min-height element

I would like the html, body and wrapper elements to have a minimum height of 100% to cover the entire viewport, but I found that I can only get html to obey this declaration.

html, body, #wrapper {
        min-height:100%;
        }

html {
        border: 2px red solid;
        }

body{
        border: 2px blue solid;
        }

#wrapper {
        border: 2px pink dotted;
        }

Create a simple html document with only a C # wrapper div, which can either have content in it or not. If the minimum pixel height is used, the elements obey it, but when I use percentages, only html will work. Why is this?

+3
source share
2 answers

It will definitely help you ...

http://www.cssstickyfooter.com/using-sticky-footer-code.html

0
source

Use heightinstead min-height.

body,html{
    height: 100%;
}
#wrapper {
    height: 100%;
}
+1
source

More articles:


All Articles