如何将 div 设置为孩子的外部高度？答案

【问题标题】：How to set div to outer height of children?如何将 div 设置为孩子的外部高度？
【发布时间】：2014-04-17 22:09:41
【问题描述】：

我有以下情况，不想为此使用JS：

有一个标题（蓝色），然后是一个可能包含内容的 div（如果不是，它应该完全折叠），然后是正文（灰色）。

现在我想用绿色边框左右 div 来填充标题和正文之间的整个间隙。差距是由带有红色边框的 div 上的margin: 10px; 引起的。

到目前为止，我发现的唯一“解决方案”是将padding: 1px 0; 设置为带有绿色边框的 div（参见小提琴中的注释行）。有没有更好的解决方案来强制div或边框覆盖孩子占据的整个高度，如果没有孩子则完全折叠？

我无法控制 div 内的内容，所以不使用边距不是解决方案。

【问题讨论】：

标签： html css

【解决方案1】：

我猜你看起来像这样：- DEMO

将overflow:hidden 提供给您的横幅类以达到预期的效果..

CSS

 .banner {
    border-left: 1px solid #008000;
    border-right: 1px solid #008000;
    overflow: hidden;
}

【讨论】：

【解决方案2】：

您可以尝试使用overflow: auto; 属性，而不是使用padding。它会起作用的。

.banner{
    border-left: 1px solid green;
    border-right: 1px solid green;
    overflow: auto;
}

【讨论】：

【解决方案3】：

另一种解决方案是将padding: 10px; 赋予.banner 并从横幅子元素中删除margin: 10px;。

另外，尽量避免使用内联样式。

【讨论】：