Question

1

Create scrollable content for a fixed 100% height div

rated 0 times [ 6] [ 5] / answers: 1 / hits: 39071 / 11 Years ago, mon, may 27, 2013, 12:00:00

I would like to create a scrollable div. I know here is lots of example, but neither of them works for me.

I have a .page class, which fills my mobile's screen. Inside of it I have a .content div. This is contain the content of the pages. It is just align the content from the top, and it should have to scroll the content if it is going out of the .content's boundaries.

.page{

    margin: 0;

    padding: 0;

    min-height: 100%;

    width: 100%;

    display: block;

}

.content{

    padding: 4em 0 0 0;

    overflow-x: hidden;

    overlofw-y: auto;

    /*-webkit-overflow-scrolling: touch;*/    

}

What should I do to get it working?

Update

I tried it in fiddle, and it is worked. But not on my phone. Because of it I don't know where should be the problem.

Because of it I attached my whole code to the question. This is very important for me to get it working.

Please help me. Thanks for any help. :)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jeffery

Add To Favorites

Follow

Total Points: 180

Total Questions: 114

Total Answers: 117

Location: Chad

Member since Mon, Dec 5, 2022

2 Years ago

answered 11 Years ago ryderalfonsos · Accepted Answer

Is this what you need??

html, body{

    height:100%;

    margin:0;

    padding:0;

}

.page{

    margin: 0;

    padding: 0;

    height: 100%;

    width: 50%;

    display: block; border:solid #000 1px

}

.content{

    padding:0;

    overflow: scroll; overflow-x:hidden;

    height:100%

    /*-webkit-overflow-scrolling: touch;*/    

}

span{

     padding:4em 0 0 0;

    display:inline-block

}

DEMO

Use span tag to specify the padding for content div coz if you give padding to the content div it calculates as additional height 100%+4em so..

And make sure that you are specifying html and body height as 100% whenever you want to use height:100% in your page.