Error404 Error404 - 6 months ago 11
HTML Question

HTML tag not covering full content

I want that my

html
tag covers all the content when it overflows the webpage but if I set
html
tag to 100% it only covers the 100% of the height and width of my screen.

Example: JSFiddle.

How can I make that the
html
tag cover always the content?

Thanks in advance!

Dan Dan
Answer

Percentage heights are calculated from the height of their parents.

Since the html has no parent height, it get's the viewport height, which is not what you want.

What you actually want to do is omit a height declaration on the html tag, and then your .container height will expand to contain all of its content (since the parent no longer has a height, it can expand as much as it wants).

So simply

html, body{
   width: 100%; // no height declaration
}

will do the trick.

Comments