如何使div全屏和可滚动？

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;
}

这是一个工作小提琴：

工作小提琴