css - 位置固定的父 div 的子元素中的 scroll 属性

Question

我想知道一个简单的事实:

<div style="position:fixed;height:100%;width:100%;overflow:scroll">
 <div style="position:relative">Large content</div>
</div>

很好。再一次(overflow 放在子样式中):

<div style="position:fixed;height:100%;width:100%;">
 <div style="position:relative;overflow:scroll">Large content</div>
</div>

它不滚动。

我只是想知道简单的原因。有人介意告诉我吗？

Answer 1

原因是您的 parent 获得了窗口高度，并且仅限于此。但是，子项不受高度限制，所有内容都在其中可见。

例如，如果您有一个高度为 2000 像素的文本，在 1920x1080 屏幕上，父项的高度约为 1000 像素(可见区域)，但子项(包含内容)的高度为 2000 像素，并且不需要滚动。您可以简单地为 child 添加 height 或 max-height 样式，这将允许您使用滚动。

这fiddle是你的代码，有 15 段 lorem ipsum 文本。您可以检查它以查看以上内容。

这fiddle另一方面，给子元素添加一个 max-height: 95%，这样就可以滚动了。