Why can't I set html min height to 100%?

Question

HTML Code:

<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <link rel="stylesheet" type="text/css" href="style.css">
      <div class="sheet" style="width:80%;max-width:1024px;height:400px;"></div>
   </body>
</html>

CSS Code:

html,
body {
    min-height: 100%;
    margin: 0;
    padding: 0
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.sheet {
    background-color: red
}

What I expected to see was a red rectangle floating in the middle of the screen but what I get is the rectangle being at the top-middle.

It never worked in FF, it worked in chrome before adding the DOCTYPE tag but after that it no longer works in chrome either.

What does work is when I use height instead of min-height but I don't want to pin down the height value to the size of the screen since I may need it when containers long enough to scroll come into play.

This addresses the DOCTYPE issue: http://stackoverflow.com/a/32215263/3597276 — Michael Benjamin, Oct 24 '15 at 23:25

score 7 · Answer 1 · edited Jan 31 '18 at 09:57

7

Set the min-height property to 100vh (viewport height). Your body's minimal height will then be 100% of the viewport.

edited Jan 31 '18 at 09:57

Michael.F

110
1
9

answered Oct 24 '15 at 15:43

Captain Kopp

149
1
5

3

`100vh` refers to `viewport height`, not `vertical height`. `vw` would be `viewport width`. – thormeier Oct 24 '15 at 16:28
Sorry, my mistake. Anyways, it should work like this. – Captain Kopp Oct 24 '15 at 16:30
1

Finally a working solution to setting a footer at the bottom that still moves down along with content! – Benny Bottema Feb 20 '18 at 21:25

score 4 · Answer 2 · answered Oct 24 '15 at 15:45

4

Because it's a circular reference.

You can set min-height: 100% to html. That means it will be at least as tall as the viewport, but can grow taller if the contents (i.e. body) are taller.

Since the height of html depends on the height of body, the height of body can't depend on the height of html. So if you set min-height: 100% to the body, it won't work.

However, you can use explicit height:

Set height: 100% to html. This will make it cover the viewport, ignoring the height of body.
Set min-height: 100% to body. This will make it be at least as tall as html.

html, body {
  margin: 0;
  padding: 0
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.sheet {
  width: 80%;
  max-width: 1024px;
  height: 400px;
  background-color: red;
}

<div class="sheet"></div>

answered Oct 24 '15 at 15:45

Oriol

274,082
63
437
513

1

how is that circular reference though? body is inside the html element and html element is presumably inside the viewport, by setting min-height on both I expect both to be at least the height of the viewport – user81993 Oct 24 '15 at 16:20
1

@user81993: If you set %height to a div inside another div it will be with respect to the parent div. So the inner div's 100% means it's the same height as the parent div, not viewport. Similarly, setting 100% for body means you want to set it to be the same height as html, not viewport. – slebetman Oct 24 '15 at 16:27
1

@user81993 "*You can set `min-height: 100%` to `html`. That means it will be at least as tall as the viewport, but can grow taller if the contents (i.e. `body`) are taller.*". This implies the height of `html` depends on `body`. And if you set `min-height: 100%` to `body`, the height of `body` will clearly depend on the height of `html`. – Oriol Oct 24 '15 at 16:39

Why can't I set html min height to 100%?

2 Answers2