Question

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

调整身体大小时，我需要

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

示例show的第一部分，但滚动条仅在主体高度小于内容高度时显示，而不在子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>

Answer 1

您需要将孩子的位置设置为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>

Answer 2

当您给出绝对位置时，该元素相对于其第一个定位（非静态）祖先元素进行定位。而且在您的情况下，父级未定位或静态定位。因此，孩子将相对于视口定位。如果要让孩子相对于父母（身体）定位，则必须使父母位置相对。

<div id="body" style="position:relative; width: 300px; height: 250px; border-width: 1px; border-color: blue; border-style: solid; overflow: auto; resize: both;">

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

2 个答案: