html - 如何给容器 div 内部 div 的高度

Question

我必须使用 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”，红色将“消失”

Answer 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>

Answer 2

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

.d2 {
    height: 100%;
}

Answer 3

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

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

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

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

Answer 4

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

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