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

Question

我在这里想知道一个简单的事实：

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

它很好。再次（溢出放置在孩子的风格中）：

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

它不滚动。

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

Answer 1

原因是您的父母获得了窗口高度，并且仅限于此。但是，孩子的身高不受限制，所有内容都可以在其中看到。

例如，如果您有一个高度为 2000 像素的文本，在 1920x1080 的屏幕上，父级的高度约为 1000 像素（可见区域），但子级（包含内容）的高度为 2000 像素，而滚动则不是必需的。您可以简单地为孩子添加一个height或max-height样式，这将允许您使用滚动。

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

另一方面，这个小提琴max-height: 95%将 a 添加到子元素，并且可以滚动。

Answer 2

给你：http: //jsfiddle.net/9tKe3/

CSS

.fixed {
    position: fixed;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.content {
    height: 100%;
    background: red;
    overflow: auto;
}

Answer 3

首先你应该设置一个高度的框架，所以使用hight:;

---

例如：http: //jsfiddle.net/XGcGw/