Html 动态高度父div和不听话的孩子

如何防止子div的高度溢出其父div

我的div在我的整个网站上都被重复使用，内容也不尽相同。 我知道为家长设置高度值可以解决此问题，但我不希望这样做，因为有时它非常小

我在这里查看了许多与此问题相关的问题，但找不到适合我问题的解决方案

.Parent{
    background: #eee;
    position: relative;
    max-height: 80%;
    max-width: 80%;
    text-align: center;
    vertical-align: middle;
    margin: auto;
    padding: 5px;
    display: inline-block;
}
.Child{
    overflow: auto;
}

期望的结果

父div的高度等于其内容

如果父div超过80%的最大高度，则子div将具有滚动

演示

---

从我在你的小提琴上看到的情况来看，问题在于

最大高度：80%

规则。父div将正确扩展到该值。如果你想在那之后滚动，你只需添加

overflow: scroll;

---

到父CSS。请参阅。

从我在您的小提琴中看到的情况来看，问题在于

最大高度：80%

规则。父div将正确扩展到该值。如果你想在那之后滚动，你只需添加

overflow: scroll;

---

到父CSS。请参阅。

您可以在

.PopInfo

上设置

溢出：自动
。当滚动条不合适时，它将显示在右侧


您可以在
.PopInfo
上设置
溢出：自动
。当滚动条不合适时，它将显示在右侧


谢谢你们，我知道在提到的div上使用了overflow。不过，我希望滚动体位于popbody上，以便在滚动时保留标题。需要设置弹出体的高度。基本上，当外部div溢出时，只需滚动内部div。我担心JavaScript是实现这一点的唯一方法。但是在你的问题中添加这个要求，让我们看看是否有人有更好的想法。谢谢你们，我知道在提到的div上使用了溢出。不过我想让卷轴在popbody上，以便在滚动时保留标题。需要设置弹出框体的高度。基本上，当外部div溢出时，只需滚动内部div。我担心JavaScript是实现这一点的唯一方法。但在你的问题中加入这个要求，让我们看看是否有人有更好的想法。这是可行的，但你总是会有滚动条。使用Daniel的解决方案时，最好使用
overflow:auto这是可行的，但是你总是会有滚动条。使用Daniel的解决方案时，最好使用
overflow:auto谢谢你们两位我知道在提到的div上使用了溢出。不过我想让卷轴在popbody上，以便在卷轴运行时保留标题。我想你可能有，我也很难让它运行：）我会再看一看。我不明白，使用JavaScript可能很简单，但是使用CSS。。。问题是您正在使用
max height
约束
.PopInfo
上的高度，而不是使用
height
值。所以
.PopInfo
是说
.PopBody
，你要注意我的身高。因此，将
.PopBody
设置为
最小高度：100%
（基于其父级）将创建一个循环，因此它不会执行任何操作。我不确定你能不能用一个可变高度的信息框来做这件事。这就是我开始想的。我感谢你们的努力，谢谢。谢谢你们。我知道在提到的div中使用了溢出。不过我想让卷轴放在popbody上，这样可以在卷轴上保留标题，而卷轴我想你可能有，我也很难让它运行：）我会再看一看。我想不出来，使用JavaScript很简单，但是使用CSS。。。问题是您正在使用
max height
约束
.PopInfo
上的高度，而不是使用
height
值。所以
.PopInfo
是说
.PopBody
，你要注意我的身高。因此，将
.PopBody
设置为
最小高度：100%
（基于其父级）将创建一个循环，因此它不会执行任何操作。我不确定你能不能用一个可变高度的信息框来做这件事。这就是我开始想的。谢谢你的努力。