Div高度匹配子div

Question

我一直试图将我的div分隔开，以便他们在页面上插入彼此。我遇到的问题（如图中所示）是我无法让div的高度与div的div子相同。在这个例子中，我有“box1”和2个“子框”。子框中包含文本，但包含它们的主div没有任何高度。

这是一个问题，因为当我尝试在这个下方添加div时，他们只是插入与顶部相同的位置。

如果我的问题不明确请说出来，我会尝试详细说明

以下是HTML的快速摘录

<div id="aboutus-box1">
<div id="aboutus-box1sub1">
    <span id="subtitle">What is this site all about</span><br/>
    Information and details about the site, point put forwards to new users to look to the help page for support and to look at the <a id="textlink">site rules</a> TEXT FILLER ------------------------------------------- ----------------------------- ------------------ ------------------------- --------------------- --------------------------------- ----------------------- -------------------------- -------------------------------- ----- -------------------------------------- ----------------------------- ------------------------------------------ ------------------------------ ------------------------------------------------- -------------------------------------------------------- ------------------------------------------------ ----------------------------------------------------------------------- ------------------------------------
</div>
<div id="aboutus-box1sub2">
    <span id="subtitle">Our History</span><br/>
    How the group came about, where different members came from, how the idea came about TEXT FILLER ------------------------------------------- ----------------------------- ------------------ ------------------------- --------------------- --------------------------------- ----------------------- -------------------------- -------------------------------- ----- -------------------------------------- ----------------------------- ------------------------------------------ ------------------------------ ------------------------------------------------- -------------------------------------------------------- ------------------------------------------------ ----------------------------------------------------------------------- ------------------------------------
</div></div>

还有一些CSS

#aboutus-box1{
    width:100%;
    margin-bottom:1%;
    margin-top:1%;
    }
#aboutus-box1sub1{
    height:100%;
    width:49.5%;
    float:left;
    }
#aboutus-box1sub2{
    height:100%;
    width:49.5%;
    float:right;
    margin-left:1%
    }

这是 JSFiddle Demo

Answer 1

由于您使用的是float，因此您还需要使用clear属性使父级保留height。

 #aboutus-box1:after{
    content:" ";
    display:block;
    clear:both;
}

您可以在此处查看More About Floats以及使用clear媒体资源的其他方式。

您的Fiddle demo

Answer 2

您需要清除浮动图块才能恢复布局。

有很多方法可以做到这一点，最简单的方法是在最后一个浮动元素之后的清除div。

<div class='clear'></div>

CSS：

.clear {
    clear:both;
}

Answer 3

父母（＃aboutus-box1）需要另一种风格：overflow: hidden;