Crea contenuto scorrevole per un div altezza fissa al 100%

Question

Vorrei creare un div scorrevole. So che qui c'è un sacco di esempi, ma nessuno dei due lavora per me.

Ho una classe .page, che riempie lo schermo del mio cellulare. Dentro di esso ho un .content div. Questo è il contenuto delle pagine. È sufficiente allineare il contenuto dall'alto e dovrebbe scorrere il contenuto se esce dai limiti del contenuto.

.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;*/  
} 

Cosa devo fare per farlo funzionare?

Aggiornamento

ho provato in violino, e si lavora. Ma non sul mio telefono. Per questo motivo non so dove dovrebbe essere il problema.

A causa di esso ho attaccato tutto il mio codice per la domanda. Questo è molto importante per me per farlo funzionare.

Per favore aiutatemi. Grazie per qualsiasi aiuto. :)

Answer 1

E 'questo quello che ti serve ??

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

Usa span tag per specificare l'imbottitura per i contenuti div coz se si dà imbottitura al div contenuti calcola come altezza supplementare 100% + 4em così ..

E assicurati di specificare l'altezza html e body come 100% ogni volta che desideri utilizzare height:100% nella tua pagina.

Answer 2

È necessario ottenere altezza della finestra per questo e necessario impostarlo per .page. Ad ogni modo, potrebbe essere necessario aggiungere qualche javascript per questo. Ho usato jQuery per la soluzione. [puoi usare altra libreria, dipende da te. Io vi sto suggerendo questa soluzione]

Ecco markup:

<div class="page"> 
    <div class="content"> 

    </div> 
</div> 

CSS:

* { margin:0; padding:0 } /* using * for demo _ you should use proper reset */ 
html, body { height:100%; height:100% } 
body { height:5000px; background-color:#F7F7F7; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:1.6em } 
.page { background:#A2A2A2; width:200px; height:600px; overflow-y:scroll; position:fixed } 
.content { background-color:#4D4D4D; padding:10px; color:#B7B7B7; } 

JS:

$('document').ready(function(){ 
    var wHeight = $(window).height(); 
    $('.page').css({ 
     'height' : wHeight + 'px' 
    }); 
}); 

Basta vedere questo link violino - (demo live) - http://jsfiddle.net/LZT7B/