溢出：滚动在具有父级溢出的绝对定位的 div 中不起作用：隐藏答案

【问题标题】：Overflow: scroll not working in absolute positioned div with parent overflow: hidden溢出：滚动在具有父级溢出的绝对定位的 div 中不起作用：隐藏
【发布时间】：2013-11-09 02:36:55
【问题描述】：

我遇到了问题。

我的身体有溢出：隐藏；

父div有一个位置：absolute;和溢出-y：滚动；

而带有文本的 div 只是一个普通的 div。

但是因为溢出：隐藏；切断我的绝对 div 的底部，滚动不会一直向下。

我制作了一个 jsfiddle 来说明我的意思： http://jsfiddle.net/AKL35/342/

 <body style="overflow: hidden;">
      <div style="position: absolute; overflow-y: scroll">
          <div>text</div>
      </div>
</body>

如果有人可以帮助我，请回答。谢谢

【问题讨论】：

你为什么要把overflow: hidden应用到body上？
我看到你的问题的方式是你想看到一个元素的底部，但同时你告诉它的容器隐藏超出它的限制的东西......我是对的还是我错过了什么？

标签： css html

【解决方案1】：

将overflow: hidden 应用于正文将导致任何掉出窗口的内容都无法访问。有很多理由不这样做！确保所有内容都可见的唯一方法是确保所有内容都适合窗口 - 这意味着您需要知道窗口的尺寸，并动态修改内容以适应这些尺寸。

在您的示例中，iframe 高度为 644 像素，但您将 div.sidebar 设置为 800 像素的高度。因此，最后 156px 的内容是无法访问的，因为它退出了窗口，并且正文设置为隐藏溢出。将div.sidebar 设置为 550px 可以让您的内容看起来符合您的预期。如果您坚持隐藏正文溢出，则需要发现窗口大小，并将div.sidebar 高度设置为小于窗口高度。

【讨论】：

感谢您的回答，我需要溢出：隐藏；因为你不应该能够在页面中滚动并且正文高度应该是 100%.. 如果我删除隐藏的溢出，正文高度将是“100%”但它实际上不会填满 100% 的屏幕..我'已经编辑了小提琴，所以我可以告诉你jsfiddle.net/AKL35/345 如果我删除溢出：隐藏，带有背景图像的 div 不会是完整的 100%，但我看到可滚动的 div 将是 100% 的高度。对不起我的英语。
最终的结果是你希望滚动的内容的div不能超过窗口本身的尺寸。如果您希望将溢出：隐藏在 body 上，您必须确保 body 的尺寸大于包含内容的 div。
除了将身高设置为 100% 之外，还有其他方法吗？因为这样做时，它只会将高度设置为视图的大小。
我想您需要在 CSS 中将主体高度设置为 100%，并使用 JS 将内容 div 的高度动态设置为小于加载时的主体高度。我认为没有办法只使用 CSS 来完成您正在寻找的事情，因为内容窗口的高度取决于查看器窗口的高度。