Question

我是html和css的新手。我尝试设计网页，但根div的背景颜色有问题。我的代码有点复杂，但我尝试转换为示例问题。这是我的代码。

    <style>

#background{
    background-color:#F78F91;
    width:800px;
    min-height:20px;
}

.content{
    min-width:50px;
    max-width:150px;
    min-height:30px;
    max-height:500px;
    float:right;
    background-color:#1860DF;
    border-bottom-color:#D9F733;
    border-style:solid;
    border-width:thin;
}

</style>

<body>
<div id="background">
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
</div>

我希望背景与儿童div具有相同的高度。感谢。

Answer 1

将display:table添加到#background：

#background{
    background-color:#F78F91;
    width:800px;
    min-height:20px;
    display: table;/*Add this*/
}

fiddle with table

替代方法只需使用float:left：

#background{
    background-color:#F78F91;
    width:800px;
    min-height:20px;
    float: left;/*Add this*/
}

fiddle with float

Answer 2

添加'overflow：hidden;'到你的背景css：

#background{
  background-color:#F78F91;
  width:800px;
  min-height:20px;
  overflow:hidden;
}

将根高度设置为子高度

2 个答案: