Fill Remaining Height of Window

Question

I know this question has been asked many times before but I don't seem to get my example right. How can I make the purple div fill the remaining height of the window?

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            height: 100%;
            margin: 0;
        }

        .container {
            display: flex;
            flex-flow: column;
            height: 100%;
        }

        .topbox {
            background-color: red;
            flex: 0 1 40px;
        }

        .bottombox {
            background-color: purple;
            flex: 1 1 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="topbox"></div>
        <div class="bottombox"></div>
    </div>
</body>
</html>

you are all good, simply missing `html{height:100%}`, no need more than this — Temani Afif, Jun 04 '18 at 10:49

Nandita Sharma · Answer 1 · 2020-01-23T06:40:27.013

5

Add 100% height on html tag.

html  {
    height: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <style>
    html {
      height: 100%;
    }
    
    body {
      height: 100%;
      margin: 0;
    }
    
    .container {
      display: flex;
      flex-flow: column;
      height: 100%;
    }
    
    .topbox {
      background-color: red;
      flex: 0 1 40px;
    }
    
    .bottombox {
      background-color: purple;
      flex: 1 1 auto;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="topbox"></div>
    <div class="bottombox"></div>
  </div>
</body>

</html>

edited Jan 23 '20 at 06:40

answered Jun 04 '18 at 10:42

Nandita Sharma

13,287
2
22
35

Thank you very much for the answer Nandita! – Frank Jun 04 '18 at 10:43
sorry but in your case there is no need for 100% in the html if you will be using calc later – Temani Afif Jun 04 '18 at 10:46
I updated the answer @TemaniAfif – Nandita Sharma Jun 04 '18 at 10:47
still don't agree .. the only missing CSS in his code is `html{height:100%}`, the flex is doing the job fine – Temani Afif Jun 04 '18 at 10:48
I feel flex has many issues in IE when we use the 'flex' css property. So I try to avoid it at any costs. Also flex is not necessary for this layout. I dont know why is OP using it any way. – Nandita Sharma Jun 04 '18 at 10:50
`I dont know why is OP using it any way.` he's free :) [by the way I always see you providing only flexbox solution ;) ] ... and we need to fix his code. If you disagree with his method you can say it clearly .. but actually your code may lead to confusion. You removed flex for `.bottombox` and replace it with `height:100%` which is not totally correct because the default shrink behavior saved you here ... remove `display:flex` from parent and see what will happen – Temani Afif Jun 04 '18 at 10:53
`So I try to avoid it at any costs` --> as a side note : you kept the use of flex on your code – Temani Afif Jun 04 '18 at 10:57
Hahaha. Yeah @TemaniAfif, you are right I mostly give flex solutions. But I dont like this shorthand of flex 'flex : 1 1 auto'.. It caused me a lot of issues in IE. So I try avoiding it. :p – Nandita Sharma Jun 04 '18 at 10:59
and using `height:100%` is not a good idea, it's a workaround ... height:100% mean all the height of the container BUT you have the shrink behavior that will shrink your div less than the 100% ... so this may create issue in case the OP decide to change the shrink behavior. – Temani Afif Jun 04 '18 at 11:01
@TemaniAfif Thanks for your explanation,I have updated the answer as you suggested. I am all open to suggestions where i learn something new. Thanks :) – Nandita Sharma Jun 04 '18 at 11:07

Fill Remaining Height of Window

1 Answers1