如何给容器 div 内部 div 的高度答案

【问题标题】：how to give a container div the height of the inner div如何给容器 div 内部 div 的高度
【发布时间】：2013-07-28 08:08:58
【问题描述】：

我必须潜水具有 class=d 的容器，其背景颜色为红色内部为 class=d2，背景颜色为灰色

如下图所示，

我希望 div d 取 div d2 的高度，但我不知道如何

这是代码

.d
{
    width:100%;
    height:100px;
    background-color:red;


}

.d2
{
    width:80%;
    height:auto;    
    float:left;
    background-color:Gray;

}

如果我将 div d 的高度设置为“auto”，红色将“消失”

【问题讨论】：

标签： html css

【解决方案1】：

你需要另一个样式清晰的div：都这样然后d的高度可以设置为auto

<style>
.d
{
    width:100%;
    height:auto;
    background-color:red;
}
.d2
{
    width:80%;
    height:auto;    
    float:left;
    background-color:Gray;
}
</style>
<div class="d">
    <div class="d2">
    type something here<br />
    <br />
    <br />
    <br />
    <br />
    something again the parent div's height will depend by this div
    </div>
    <div style="clear:both;">
</div>

【讨论】：

【解决方案2】：

如果.d 有一个指定的高度（在你的情况下，它确实——100px）那么你可以设置

.d2 {
    height: 100%;
}

【讨论】：

【解决方案3】：

因为你已经设置了 d 的高度：

.d
{
  width:100%;
  height:100px;
  background-color:red;
}

将 d2 的高度设置为 100px 或 100%：

.d2
{
  width:80%;
  height:100px;    
  float:left;
  background-color:Gray;
}

【讨论】：

【解决方案4】：

在我看来，您的 d2 高度大于您的 d 容器。我猜你不希望你的容器和你的d2 有相同的高度，如果d2 更小，但如果它更大，你的d 容器应该仍然足够大。

如果是这种情况，请将 d 中的 height 更改为 min-height: 100px;

【讨论】：