Utwórz zawartość przewijaną dla ustalonego div o wysokości 100%.

Question

Chciałbym utworzyć przewijany div. Wiem, że tutaj jest wiele przykładów, ale żadne z nich nie działa dla mnie.

Mam klasę .page, która wypełnia ekran mojej komórki. Wewnątrz tego mam div .content. To zawiera treść stron. Po prostu wyrównuje zawartość z góry i powinna przewijać zawartość, jeśli wychodzi poza granice .content.

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

Co należy zrobić, aby działało?

Aktualizacja

próbowałem go w skrzypcach, i to działało. Ale nie na mój telefon. Z tego powodu nie wiem, gdzie powinien być problem.

Z tego powodu załączam cały mój kod do pytania. Jest to dla mnie bardzo ważne, aby działało.

Proszę, pomóż mi. Dzięki za pomoc. :)

Answer 1

Czy tego właśnie potrzebujesz?

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

Zastosowanie span tag określić dopełnienie do zawartości div coz jeśli dasz dopełnienie do zawartości div oblicza jako dodatkowy wysokości 100% + 4em tak ..

I upewnij się, że podajesz wysokość html i body jako 100%, gdy chcesz użyć na swojej stronie height:100%.

Answer 2

Musisz uzyskać wysokość okna i ustawić ją na .page. W każdym razie może być konieczne dodanie do tego javascriptu. Użyłem jQuery do rozwiązania. [możesz użyć innej biblioteki, która zależy od ciebie. I sugeruję Ci to rozwiązanie]

Oto 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' 
    }); 
}); 

Wystarczy zobaczyć ten skrzypce link - (Demo na żywo) - http://jsfiddle.net/LZT7B/