Question

我希望我的容器DIV在使用JS或CSS添加一些DIV时自动扩展其高度（悬停）

我尝试了但是有一个溢出，你可以在FIDDLE看到它：

HTML：

<div class="container" >
    <div class="hov">Hello</div>
    <div class="sub"></div>
</div>

CSS：

.container {
    background-color: beige;
    height: 80px;
    width: 200px;
    padding: 10px;

}
.sub {
    background-color: yellow;
    height: 80px;
    width: 200px;
    display: none;
}
.hov:hover + div {
    display: block;
}

.hov {
    cursor: pointer;
}

Answer 1

使用min-height代替height

See JSFiddle

Answer 2

使用min-height作为René说，或者从.container完全删除高度。

Answer 3

由于您已向您的.container提供声明的高度，因此浏览器不会在悬停时动态计算容器的高度/您希望容器展开的任何操作。当它设置为auto时，它会以这种方式工作，它默认设置为。{/ p>

删除固定高度，.container将根据内容展开。

要实现您的需求，请将min-height设为.container。 FIDDLE

Answer 4

你要限制容器div的高度，即80px;

只需将高度替换为 min-height：80px;

即可获得解决方案

容器在修改后看起来像：

.container {
    background-color: beige;
    min-height: 80px;
    width: 200px;
    padding: 10px;

}

我身高溢出

4 个答案: