Stretching a div's height to the rest of the parent div

Question

I've got 3 div's that I want to look like this:

divs

Here's the HTML:

<section class="main-window">
    <div id="topdiv"></div>
    <div id="middiv"></div>
    <div id="botdiv"></div>
</section>

And the CSS:

.main-window
{
  vertical-align: middle;
  border: 2px solid gray;
  border-radius: 5px;
  width: 90%;
  height: 70%;
  background-color: White;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

#topdiv {
  background-color: beige;
  height: 40%;
  border: 2px solid black;
}

#middiv {
  background-color: lightblue;
  height: 40%;
  border: 2px solid black;
}

#botdiv {
  background-color: lightgreen;
  height: 20%;
  border: 2px solid black;
}

Here's the fiddle.

Notice that I've added heights to the divs of 40%, 40% and 20% so that they fill the 100% of the parent div. However, after I added a border to each div, the total height is increased slightly beyond the parents boundaries.

My question is: can I set heights of 40% for the two top divs and make the bottom div stretch until the bottom of its parent div?

possible duplicate of [Make a div fill the height of the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — Paulie_D, Jun 18 '14 at 10:03

Mr_Green · Accepted Answer · 2014-06-18T10:13:57.933

3

You should add this css to each child element:

box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;

Working Fiddle

and if you make adjustments in border, it seems to look nice.

Updated Fiddle

edited Jun 18 '14 at 10:13

answered Jun 18 '14 at 10:04

Mr_Green

40,727
45
159
271

@Mr_Green, it works. I've tested Firefox, IE and Chrome and the result is fine with just `box-sizing` without the other prefixed ones. You included them for a reason though, what is it? – chiapa Jun 18 '14 at 10:38
@chiapa it is for older versions of browsers. include it as the dystroy's link suggested above. [for good practice] – Mr_Green Jun 18 '14 at 10:38

score -2 · Answer 2 · edited Jun 18 '14 at 10:15

-2

include jQuery and write below jQuery for third div

 $(document).ready(function () {
     $("#botdiv").height($(".main-window").height() - $("#topdiv").height() - $("#middiv").height());
 });

edited Jun 18 '14 at 10:15

Mr_Green

40,727
45
159
271

answered Jun 18 '14 at 10:13

Dhaval Panchal

648
6
26

Stretching a div's height to the rest of the parent div

2 Answers2