CSS：有重叠子div的父div - 无法正确获取父高度

Question

我想在#middle-panel中除去.box-label文字下面的额外空间，但我需要保持#middle-panel在较小的屏幕尺寸下展开并且文本变成堆叠的功能。如果我设置特定高度的#middle-panel来消除多余的空间，它将不再扩展以适应堆叠类型。

这个链接展示了我的当前实现：当前实现

如果你在这个链接中为#middle-panel-inner-div添加height: 65px;，你会看到所需的文字下方的空间。不幸的是，如果你将.red-box-and-label类的width:从25%更改为20%（表示在较小的屏幕尺寸下会发生什么），你会看到文本变成了堆叠，但#middle-panel并没有扩展以适应它。删除刚刚添加的height: 65px;，你会看到#middle-panel现在已经扩展以适应文本，但下面的空间太多。

我尝试过一些解决方案，例如：Div overlapping & wrong height，但似乎都不起作用。

如果您有任何建议，将不胜感激！

- eggroll

---

当我们在较小的屏幕尺寸上浏览时，幸运的是您使用了固定的600像素宽度来设置#main... - Roko C. Buljan

我只是为了演示而使用了固定宽度，因为宽度设置并没有导致问题。实际上，我在面板和主体上使用100%的宽度（加上媒体查询等）。对于造成的混淆，我感到抱歉。 - eggroll

Answer 1

这种情况发生是因为高度设置为“auto”且父级div的高度取决于子div，所以它会使用其子div的高度，即使你给出了负值的“top”。解决此问题的方法是删除负值的“top”，并给“red-box-and-label”类添加“margin-top”。从“middle-panel-inner-div”中删除“top: -30px;”并添加：

.red-box-and-label {
    margin: -30px 0 0;
    padding: 0;
    width: 25%;
}

更新的可运行JSFiddle代码

- ketan

---

这个很好用！你能帮我理解为什么在.red-box-and-label上使用margin: -30px 0 0;可以工作，但是将此边距应用于#middle-panel-inner-div却不行吗？ - eggroll

@eggroll，正如我在答案中所解释的那样。相对位置即使显示为“top：-30px;”，在页面布局中也会占用空间。而在边距中，内容和空间都会移动。 - ketan

如果我从#middle-panel-inner-div中删除position: relative并将其负上边距(margin: -30px 0 0, 而不是top: -30)设置给.red-box-and-label，则负边距会被忽略。一旦我从#middle-panel-inner-div中删除了position: relative，它仍然有什么不同之处，使得它的行为/呈现方式与.red-box-and-label不同，即它没有向上移动30像素？ - eggroll

@eggroll 如果您删除 position:relative，则负上边距将起作用，但不会移动对象的位置，因为未指定位置。请查看 https://jsfiddle.net/73auc3Lh/10/。使用 Firebug 插件进行检查。还可以查看：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/。 - ketan

Answer 2

通常，您需要为 #middle-panel-inner-div 创建一个内部包装器，并使用负 bottom-margin 来补偿您将框向上移动的 30px。但是如果您放置它，您必须将所有 #middle-panel-inner-div 的 flex 属性移动到内部包装器中。因此，更容易的方法是为其创建外部包装器，将 top:-30px; position:relative 移至其中，并将 margin-bottom: -30px 添加到 #middle-panel-inner-div 中。

这是您的更新后的示例。

请注意标记和相关 CSS 代码的更改：

.aWrapper {
  top: -30px;
  position: relative;
}
#middle-panel-inner-div {
  /* top: -30px */
  /* position: relative */
  margin: 0 auto -30px;
}

- tao

---

谢谢，Andrei，这个也很好用！由于Ketan的解决方案略微简单，您能想到让我采用您的解决方案的场景吗？ - eggroll

是的。他的解决方案通过在#middle-panel-inner-div的内容上应用-30px的边距来解决问题。如果该内容换行，所有行与上一行的距离都将缩短30px。我的解决方案仅会在容器上应用边距，不会影响内容。如果它们从不换行，那么就没有问题。 - tao

太棒了！我的内容永远不会换行，所以Ketan的解决方案可行。但我还是问一下，以防有我不知道的东西，就像你所描述的那样，这样当我需要像那样的东西（即我的内容换行）时，我就可以应用你的解决方案。谢谢，Andrei！！我一定会在有声望后点赞你的回复 :-) - eggroll