I have three divs arranged horizontally, and I'd like for the bottom div to just take up the bottom of the screen. As it is, the bottom most div doesn't do that-there's whitespace at the bottom. How do I get it so that only the three divs are showing?

<div id="the whole thing" style="height:100%; width:100%">

  <div id="toprow" style="position: relative; width:100%; height:150px; background-color:red;color:white">
    First row
  </div>

  <div id="secondrow" style="position: relative; width:100%; height: 300px;background-color:black;color:white">
    Second row
  </div>

  <div id="thirdrow" style="position: relative; width:100%; height:100%;background-color:blue;color:white">
    Third row
  </div>


</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Try doing this using display: flex.

You can try this:

<style>
    #thewholething{
        display: flex;
        flex-direction: column;
    }
    #thirdrow{
        flex-grow: 1;
        align-self: stretch;
    }
</style>

and the HTML:

<div id="thewholething" style="height:600px; width:100%">

    <div id="toprow" style="width:100%; height:150px; background-color:red;color:white">
        First row
    </div>

    <div id="secondrow" style="width:100%; height: 300px;background-color:black;color:white">
       Second row
    </div>

    <div id="thirdrow" style="width:100%; background-color:blue;color:white">
       Third row
    </div>
</div>

Try playing with the overall height of the parent DIV or the other DIVs and see the magic!

EDIT: You can try this without align-self: stretch; and it works too!

CodePudding user response：

This isn't the best solution but it works here and as suggested to you it's better to use flexbox

I only change the height to 100vh which to take the full height of the web page but 100% will not take the full page as the parent doesn't have a certain height so it takes what it needs also try to see how everything works together in css

<div id="the whole thing" style="height:100vh; width:100%">

  <div id="toprow" style="position: relative; width:100%; height:150px; background-color:red;color:white">
    First row
  </div>

  <div id="secondrow" style="position: relative; width:100%; height: 300px;background-color:black;color:white">
    Second row
  </div>

  <div id="thirdrow" style="position: relative; width:100%; height:100%;background-color:blue;color:white">
    Third row
  </div>


</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>