mmotti mmotti - 9 months ago 35
HTML Question

<html> and <body> not respecting 100% height

I've been having no-end of issues with heights as of late.

I managed to solve the heights of some elements with


I just can't get the HTML and Body tags to play ball (visible in element inspector after scroll line.)

Here is my current attempt:

I have the html and body height specified as 100% due to the fact that the homepage doesn't exceed the browser window and I need to push a footer to the bottom and fill the space. I suspect though that this is potentially the cause of me experiencing issues when the page content exceeds the browser window.

Please could somebody advise?


You have this in your code:

html, body {
    height: 100%;

That essentially limits the primary containers to 100% height of the viewport.

Because of the way percentage heights work, it's a bit messy and complicated to get them to work with min-height.

Instead of percentage heights consider viewport percentages. Remove the code above and add this:

body {
    min-height: 100vh;

revised fiddle

From the spec:

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

  • vw unit - Equal to 1% of the width of the initial containing block.
  • vh unit - Equal to 1% of the height of the initial containing block.
  • vmin unit - Equal to the smaller of vw or vh.
  • vmax unit - Equal to the larger of vw or vh.