Make div use all the remaining height of the screen

Question

I need to make the .content div use the remaining screen height. I don´t know what´s the height of .header - I can´t use calc(100vh - headerHeight)

HTML structure

<html>
    <body>
        <div class="header">header</div>
        <div class="content">content</div>
    </body>
</html>

CSS

html, body {
    height: 100%;
}

Tried with

.content {
    display: flex;
    flex-grow: 1;
}

using 100vh didn´t work because it generated some vertical scroll (with the height of the .header)

.content {
    height: 100vh
}

it should look like this

+-------------------------------+
|            header             |
+-------------------------------+
|                               |
|                               |
|            content            |
|                               |
|                               |
+-------------------------------+

possible duplicate: https://stackoverflow.com/questions/40020921/ — kukkuz, Jun 01 '19 at 06:36

score 1 · Answer 1 · answered Jun 01 '19 at 05:02

Set the <body> element as your flex container.
Then you can set .content so it's able to grow.

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.header {
  background-color: lightgreen;
}

.content {
  flex: 1 0 auto;
  background-color: lightblue;
}

<div class="header">header</div>
<div class="content">content</div>

For reference, see Basic concepts of flexbox.

score 0 · Answer 2 · answered Jun 01 '19 at 05:05

0

If I were you I would consider the following code.

html,
body {
  height: 100%;
}

.content {
  display: flex;
  flex-grow: 1;
  background: khaki;
  height: 100%;
}

.wraper {
  height: 100vh;
  background: pink;
}

<html>

<body>
  <div class="wraper">
    <div class="header">header</div>
    <div class="content">content</div>
  </div>
</body>

</html>

answered Jun 01 '19 at 05:05

Mobarak Ali

751
5
19

This seems similar the OP's attempt using `100vh`, but it wasn't satisfactory because it "generated some vertical scroll (with the height of the .header)". – showdev Jun 01 '19 at 05:15
correct. if .content is Is higher than 100vh it will hide the .header – handsome Jun 01 '19 at 05:55

Make div use all the remaining height of the screen

2 Answers2