An arbibrary hight on header + rest of the height on container

Question

I want to achieve the following behavior like in the image

So, I have a header with an arbitrary height and I want the container to fill the rest of the space. I have the following code:

<body>
    <div class="header">
        My header<br> Arbitrary height (ex: 123px)
    </div>

    <div class="container">
        Container <br> Height = rest of the viewport
    </div>
</body>

Note: I don't want to use .container{ height: calc(100% - 123px) } because the in the future 123px may change, so I don't want to modify in two places.

you need to consider the questions you get as related while writing yours ... the first one was the one you need — Temani Afif, Nov 13 '18 at 09:26

score 2 · Answer 1 · answered Nov 13 '18 at 09:23

You can use flexbox for this:

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.header {
  height: 123px; /* whatever height you want */
  background:green;
}

.container {
  flex-grow: 1;
  background:beige;
}

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

score 1 · Accepted Answer · answered Nov 13 '18 at 09:25

See following example:

<!DOCTYPE html>
<html>
<head>
 <title></title>
  <style>
    html,
 body {
   height: 100%;
 }
 body {
   min-height: 100%;
   display: flex;
   flex-direction: column;
   padding:0;
   margin:0;
 }
 .container {
   flex: 1;
   overflow:auto;
   padding:10px;
 }
 .header {
   background-color:green;
 }
  </style>
</head>
<body>
    <div class="header">
        <p>My header<br> Arbitrary height (ex: 123px)</p>
        <p>My header<br> Arbitrary height (ex: 123px)</p>
    </div>

    <div class="container">
        Container <br> Height = rest of the viewport
    </div>
</body>
</html>

An arbibrary hight on header + rest of the height on container

2 Answers2