How to make a div fullscreen and scrollable?

Question

Absolutely, it scrolls, but does not reach 100% of the 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); } 

With fixed, it gets 100% tall but doesn't scroll

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

I would like to avoid adding a fixed binding to the child and make it overflow: scroll

Answer 1

You need to add overflow:auto so that it scrolls if the content overflows the container.

 .class { ... overflow:auto; } 

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

More information on overflow: auto and overflow: visible ,
see: http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping

Answer 2

So, first of all, if you want to have a height and width of 100%, you will need to determine what it is. Therefore, you should tell html / body that the size they have is 100% of the width / height.

Now you do not want the page to scroll down if the text comes out of the div, because you will see a space if you do this. So set the overflow-y to scroll so that it scrolls inside the div and not in the document itself.

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

Here is a working fiddle:

WORKING FIDDLE