Posted over 1 year ago. Visible to the public. Repeats.

Stretch an HTML page to full height

This card existed before, but was outdated due to browser implementation changes. The information below is validated for the current list of browsers we support.


By default your html and body elements are only as high as the actual page content. If you only have two lines of text in your page, your html and body elements will only be around 40 pixels high, regardless of the size of your browser window.

You might be surprised by this, since setting a background on either html and body does cover the entire browser viewport. So what is happening? Well, since you cannot select the browser viewport with CSS, the browsers will take some properties like background-color and overflow-y from body and html and apply it to the unnamed viewport. I'm sorry for that.

To make things even more confusing, older browsers like IE9 actually do make html the full height of the browser viewport.

Anyway, this means that if you anchor an element absolutely to the bottom of the page, it will not actually sit on the bottom of the page if the content is narrower than the browser viewport's height:

Copy
.box { background-color: red; position: absolute; left: 0; bottom: 0; // this is the bottom end of the content, not the bottom end of the viewport width: 200px; height: 20px; }

To make the page at least as high as the browser viewport (and then grow it if the content exceed's the viewport height), give your html as min-height of 100%:

Copy
html { min-height: 100%; }

This will align the .box above with the bottom of the viewport as expected, or with the bottom of the content if it is longer than the viewport is high.

Note that your body will still only be as high as your content. If you absolutely, positively need your body to be at least as high as the browser viewport, you can give it a min-height of 100vh. This means 100% of the viewport height:

Copy
body { min-height: 100vh; }

This works on Internet Explorer 9+ (I tested).

Note that any margin on body is added to the 100% because CSS.

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Author of this card:

Avatar
Henning Koch
Last edit:
about 1 year ago
by Henning Koch
Keywords:
window, document, fully
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandropedia