Làm cách nào để tạo toàn bộ màn hình div và có thể cuộn được?

Question

Với tuyệt đối, nó cuộn nhưng không có được 100% trong height:

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

Với cố định, nó được 100% về chiều cao nhưng không di chuyển

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

Tôi muốn tránh thêm một phần tử cố định vào phần tử con và làm cho nó overflow: scroll

Answer 1

Bạn cần phải thêm overflow:auto để nó cuộn nếu nội dung tràn container.

.class { 
    ... 
    overflow:auto; 
} 

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

Để biết thêm thông tin chi tiết liên quan đến overflow: auto và overflow: visible,
see: http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping

Answer 2

Trước tiên, nếu bạn muốn có chiều cao và chiều rộng 100%, bạn sẽ phải xác định GÌ đó là gì. Vì vậy, bạn phải nói cho html/body rằng kích thước chúng có, là 100% chiều rộng/chiều cao.

Bây giờ bạn không muốn để trang cuộn xuống, nếu văn bản đi ra khỏi div, bởi vì bạn sẽ thấy không gian màu trắng nếu bạn làm. Vì vậy, thiết lập overflow-y để cuộn, do đó, nó sẽ di chuyển bên trong div, và không phải trong tài liệu chính nó.

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

Đây là một fiddle làm việc:

WORKING FIDDLE