Create scrollable content for a fixed 100% height div

Question

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. :)

Answer 1

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.