min-height: 100% doesn't seem to work, div does not take full height

Question

I have a codepen to make things easier.

html {
  height: 100%;
}

body {
  min-height: 100%;
  padding: 1.25em;
  background-color: #292c37;
  border: 1px solid red;
}

.main-app {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid green;
}

header {
  background-color: wheat;
}

main {
  background-color: firebrick;
}

footer {
  background-color: skyblue;
}

header, main, footer {
  padding: 1.25em;
}

<div class="main-app">
  <header>Header</header>
  <main>Main</main>
  <footer>Footer</footer>
</div>

I would like .main-app to take the full available height but as you can see it doesn't do it for some reason.

What am I doing wrong?

I think this might help: https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window — ROOT, Feb 02 '20 at 14:56

score 3 · Answer 1 · edited Feb 06 '20 at 13:53

3

use height: 100vh; instead of 100%.

edited Feb 06 '20 at 13:53

Martijn Pieters

1,048,767
296
4,058
3,343

answered Feb 02 '20 at 15:00

hannon qaoud

79
1
12

score 2 · Accepted Answer · answered Feb 02 '20 at 15:02

You need to set parent elements height to 100% as well. In your case, set body's height to 100%.

html {
  height: 100%;
}

body {
  padding: 1.25em;
  background-color: #292c37;
  border: 1px solid red;
  height: 100%;
}

.main-app {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid green;
}

header {
  background-color: wheat;
}

main {
  background-color: firebrick;
}

footer {
  background-color: skyblue;
}

header,
main,
footer {
  padding: 1.25em;
}

<div class="main-app">
  <header>Header</header>
  <main>Main</main>
  <footer>Footer</footer>
</div>

min-height: 100% doesn't seem to work, div does not take full height

2 Answers2