Html 拉伸div'；s相对于父div其余部分的高度

我有3个分区，我想看起来像这样：

以下是HTML：

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

这是我的建议

请注意，我已经为40%、40%和20%的div添加了高度，以便它们填充父div的100%。但是，在我为每个div添加了边框之后，总高度会略微增加，超出父div的边界

---

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

您应该将此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;

若你们在边界上做一些调整，看起来会很不错

---

包括jQuery，并在jQuery下面写入第三个div

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

---

可能的副本根本不相同@Paulie_D@Mr_Green，它起作用了。我已经测试了Firefox、IE和Chrome，结果很好，只需

框大小

，没有其他前缀。不过，您之所以包含它们是有原因的，这是什么？@chiapa它适用于较旧版本的浏览器。按照上面建议的dystroy链接将其包括在内。[良好做法]

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