How to make the body and its children have 100% visible height?

advertisements

BOTH HTML/BODY 100% SOLUTION

html, body { height : 100% }

This works, no doubt. Both elements will take up the full screen, perfect.

Why not use? vh-instead? Well that has to do with mobile Safari, there is a big difference between 100% taking up the visible space and 100vh taking the view height making it larger then the toolbar, not desired in my case.

There is just one big problem with this approach. If the content within the body takes up more then 100% of the visible height, like in most cases, it will overflow. This might not be a big problem, besides it feeling hacky, however it does break -webkit-sticky to not stick elements further then the body container.

MIN-HEIGHT TO THE RESCUE, NOT QUITE

So actually what we want is to say, hey HTML and BODY be at least 100%. That would solve all our problems because that's exactly what we want. Luckily there is a property for that min-height.

html, body { min-height : 100% }

If they are both at least 100% of the viewport it should work, but it doesn't.

PROPOSED SOLUTION

html {
    height : 100%;
}

body {
    min-height : 100%;
}

This does make the height of the body the viewport height, however all the children elements do not recognize this, for example:

HTML Source

<head>
  <title>Body Height Problem</title>
</head>

<body>
  <div class="fullheight-cover">
    Some beautiful image with the CSS background.
  </div>

  <section class="content">
   Some content in section A.
  </section>

  <section class="content">
   Some content in section B.
  </section>
</body>

</html>

CSS Source

html,
body {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  background: red;
}

.fullheight-cover {
  min-height: 100%;
  background: green;
}

(Codepen: http://codepen.io/anon/pen/pbGWBq)

If you inspect the elements you will notice that the body will now have a height, which is awesome. However you expect .fullheight-cover to fill up this space with it's height being minimal 100% as well, but this does not work.

How can I make it so that the children of the body can make use of the 100% height that flows naturally?


Check this. Im added display: flex to body, and width: 100% to .content

html,
body {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  background: red;
  display: flex;
}
.content {
  width: 100%;
  min-height: 100%;
  background: green;
}
<html>
<head>
  <title>Body Height Problem</title>
</head>
<body>
  <div class="content">
    Some sample content.
  </div>
</body>
</html>