Question

使用绝对值，它会滚动但不会达到100％的高度：

.class {
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 height: 100%;
 width: 100%;
 z-index: 1000000;
 background: rgba(0, 0, 0, 0.9);
}

固定后，它的高度达到100％，但不会滚动

.class {
 position: fixed;
 left: 0;
 top: 0;
 height: 100%;
 width: 100%;
 z-index: 1000000;
 background: rgba(0, 0, 0, 0.9);
}

我想避免在子元素中添加固定的高度并使其成为overflow: scroll

Answer 1

您需要添加overflow:auto，以便在内容溢出容器时滚动它。

.class {
    ...
    overflow:auto;
}

http://jsbin.com/kuqaqumude/1/edit?html,css,output

有关overflow: auto和overflow: visible的详细信息，看到： http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping

Answer 2

首先，如果你想拥有100％的高度和宽度，你必须定义它是什么。所以你必须告诉html / body它们的大小是100％宽度/高度。

现在你不想让页面向下滚动，如果文字离开div，因为如果你这样做，你会看到空格。因此设置overflow-y进行滚动，因此它将在div内滚动，而不是在文档本身中滚动。

html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.fullwidth{
    width:100%;
    height: 100%;
    background-color: red;
    overflow-y: scroll;
}

这是一个工作小提琴：

<强> WORKING FIDDLE

如何使div全屏和可滚动？

2 个答案: