CODEWITHSUNDEEP
css
rob.m
rob.m

Reputation: 10571

How to make a div full screen and scrollable?

With absolute, it scrolls but doesn't get 100% in 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% in height 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 heigth to the child element and make it overflow: scroll

Upvotes: 13

Views: 38109

Answers (2)

Joseph Marikle
Joseph Marikle

Reputation: 78520

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

For more details concerning overflow: auto and overflow: visible,
see: http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping

Upvotes: 13

Refilon
Refilon

Reputation: 3489

So first of all, if you want to have 100% height and width, you will have to define WHAT that is. So you have to tell the html/body that the size they have, is 100% width/height.

Now you don't want to let the page scroll down, if the text goes out of the div, because you will see white space if you do. So set overflow-y to scroll, so it will scroll 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

Upvotes: 5

Related Questions