将div的高度拉伸到父div的其余部分

Question

我有3个div，我希望看起来像这样：

这是HTML：

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

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;
}

这是fiddle。

请注意，我已经将高度添加到40％，40％和20％的div中，以便它们填充100％的父div。但是，在我为每个div添加边框后，总高度略微超出父级边界。

我的问题是：我可以为两个顶级div设置40％的高度，并使底部div延伸到其父div的底部吗？

Answer 1

您应该将此css添加到每个子元素：

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

如果你在边框进行调整，它看起来很不错。

<强> Updated Fiddle

Answer 2

包含jQuery并在jQuery下面写第三个div

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