mmotti mmotti - 3 months ago 11
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

flex:auto
and
flex-shrink:0
.

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:
JSFiddle

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?

Answer

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.
Comments