时间戳

首页 > 解决方案 > 绝对定位的嵌套 div 导致溢出问题

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

问题描述

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

当身体调整大小时，我需要

  1. 溢出要隐藏的父 div 的内容
  2. 如果正文 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>

标签： javascripthtmlcss

解决方案

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

推荐阅读