html - 防止动态内容与其他 div 重叠的 div

Question

查看此 Fiddle

这是div结构

<div class="wrapper">
    <div class="mainG mainGT">
        <div class="rawV">
            <div class="svs"></div>
            <div class="drgM"></div>
        </div>
    </div>
</div>
<div class="botttom">
    <button type="button">Click Me!</button>
</div>

.wrapper 的高度是动态的(我在 fiddle 中使用了 .wrapper{height: 30px;} 作为示例)。如您所见，.wrapper 与 .botttom 重叠。如何防止 .wrapper 与 .botttom 重叠并始终在 .botttom.wrapper` 下方？

|------------|
|  .wrapper  |
|------------|

|------------|
|  .bottom   |
|------------|

Answer 1

使用 min-height 而不是 height 这将解决您的问题。

.wrapper
{
min-height: 100px;
overflow: hidden;
}