Read more

Stretching an HTML page to full height

Henning Koch
April 08, 2016Software engineer at makandra GmbH

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.


Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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:

.bottom-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%:

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:

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.

Further reading

Posted by Henning Koch to makandra dev (2016-04-08 16:55)