并排div和div超过容器div

Question

我需要你的帮助，

我的问题是双重的，首先BoxB超过其主（父）盒子的高度，其次，我似乎无法将BoxB和BoxC整齐地排列在一起，并排在一起。

这是一个快速截图：

* {
    font-family: Segoe UI;
    font-size: 9pt;
}
#main {
    border: 1px solid #000;
    width: 800px;
    height: 600px;
    font-weight: bold;
}
#boxA {
    padding: 5px;
    border-bottom: 1px solid rgb(180,180,180);
}
#boxB {
    height: 100%;
    width: 250px;
    border: 1px solid red;
    float: left;
}
#boxC {
    background: rgb(240,240,240);
    height: 100%;
    width: 545px;
    border: 1px solid blue;
    float:left;

}

<div id="main">

    <div id="boxA">Application Title</div>

    <div id="boxB"></div>

    <div id="boxC"></div>

</div>

Answer 1

正如所指出的那样，你没有正确地关闭DIVs。至于其他2个问题。如果删除浮动并使用display: inline-block，则div将位于同一行。此外，如果您制作内容box-sizing: border-box;，这将有所帮助，因为它将边框/填充保持为元素总宽度/高度的一部分。我建议如果你知道主要内容总是600px高度，你在CSS中定义，你应该给顶部div一个设定的高度，并给剩下的高度提供底部的两个div。

HTML：

<div id="main">
    <div id="boxA">Application Title</div>
    <div id="boxB"></div>
    <div id="boxC"></div>
</div>

CSS：

* {
    font-family: Segoe UI;
    font-size: 9pt;
    box-sizing: border-box;
}
#main {
    border: 1px solid #000;
    width: 800px;
    height: 600px;
    font-weight: bold;
}
#boxA {
    padding: 5px;
    border-bottom: 1px solid rgb(180,180,180);
    height: 25px;
}
#boxB {
    height: 575px;
    width: 250px;
    border: 1px solid red;
    display: inline-block;
}
#boxC {
    background: rgb(240,240,240);
    height: 575px;
    width: 545px;
    border: 1px solid blue;
    display: inline-block;
}

小提琴：http://jsfiddle.net/hpuywg42/

Answer 2

#boxC不在正确位置的问题更容易解决。这样：

<div id="boxB"><div>

<div id="boxC"><div>

应该是

<div id="boxB"></div>

<div id="boxC"></div>

您正在打开新的div，而不是按照您的意图关闭它们。面对连续三个打开的​​div，浏览器构建了新的div，以便#boxC位于#boxB内没有id的框内，然后当它到达你的html结尾时它们全部关闭标记并且无法找到它正在等待的结束标记。

至于#boxB（现在#boxC）溢出#main，问题是你已将它们设置为父母身高的100％，但也包括另一个占据垂直空间的div（即#boxA）。对此有很多解决方案，但最简单的方法可能是降低boxB和boxC的高度，以考虑#boxA占用的垂直空间。