CODEWITHSUNDEEP
css
Brimby
Brimby

Reputation: 912

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

I would like to make the html, body and wrapper elements all have a minimum height of 100% in order to cover the whole viewing window, but I have found that I can only make html 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 #wrapper div which can either have content in it or not. If a min-height of pixels is used, the elements obey it, but when I use percentages only html will work. Why is this?

Upvotes: 3

Views: 987

Answers (2)

Ozrix
Ozrix

Reputation: 3515

Use height instead of min-height.

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

Upvotes: 1

mukund
mukund

Reputation: 2980

This will definitely help you...

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

Upvotes: 0

Related Questions