javascript - 具有绝对定位的嵌套div导致溢出问题

我有一个绝对定位的父div，其中包含标头div和可调整大小的主体div，如下所示。 body div包含一个内容div和一个绝对定位的子级。

调整身体大小时，我需要


父div溢出的内容被隐藏
如果主体div的内容（内容div和子div的组合）超过主体的尺寸，则显示主体滚动条。


示例显示是第一部分，但是滚动条仅在正文高度小于内容高度时显示，而不在子div的一部分被父边界隐藏时显示。

在纯CSS或涉及一些JavaScript的情况下，是否有解决方案？

<div id="parent" style="overflow:hidden;position: absolute; left: 50px; top: 50px; border-width: 1px; border-color: black; border-style: solid;">
    <div id="header" style="border-color: red; border-width: 1px; border-style: solid;">
        <p>No scroll bars in header</p>
    </div>
    <div id="body" style="width: 300px; height: 250px; border-width: 1px; border-color: blue; border-style: solid; overflow: auto; resize: both;">
        <div id="content" style="border-width: 1px; border-color: grey; border-style: solid;">
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
        </div>
        <div id="child" style="position:absolute; top:200px;left:100px;width: 50px; height: 50px; border-width: 1px; border-color: green; border-style: solid;"
            <p>Child</p>
        </div>
    </div>
</div>

最佳答案

您需要将孩子的位置设置为relative。具有absolute位置意味着它不考虑html中的任何内容。这有点像使用上帝模式。具有relative意味着它将考虑其父位置。在这种情况下，它是div #body

我还调整了上，下两个值，这是因为在将相对位置更改为子200px时，它将其从内容位置移开了。

这是工作代码。并请...使用CSS代替属性style=""这样，您将清除html代码，这样将更易于阅读，编写和调试。

#parent {
  overflow: hidden;
  position: absolute;
  left: 50px;
  top: 50px;
  border-width: 1px;
  border-color: black;
  border-style: solid;
}

#header {
  border-color: red;
  border-width: 1px;
  border-style: solid;
}

#body {
  width: 200px;
  height: 170px;
  border-width: 1px;
  border-color: blue;
  border-style: solid;
  overflow: auto;
  resize: both;
}

#content {
  border-width: 1px;
  border-color: grey;
  border-style: solid;
}

#child {
  position: relative;
  top: 20px;
  left: 30px;
  width: 50px;
  height: 50px;
  border-width: 1px;
  border-color: green;
  border-style: solid;
}

<div id="parent">
  <div id="header">
    <p>No scroll bars in header</p>
  </div>
  <div id="body">
    <div id="content">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
    <div id="child">
      <p>Child</p>
    </div>
  </div>
</div>