Sabit bir% 100 yükseklik div

Question

için kaydırılabilir içerik oluşturma Kaydırılabilir bir div oluşturmak istiyorum. Burada çok örnek olduğunu biliyorum ama ikisi de benim için işe yaramıyor.

Mobil ekranımı dolduran bir .page sınıfım var. İçinde bir .content div var. Bu, sayfaların içeriğini içerir. İçeriği en üste hizalar ve içeriğin .content sınırlarının dışına çıkması durumunda içeriği kaydırması gerekir.

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

Çalışmak için ne yapmalıyım?

Güncelleme

ben keman bunu denedik ve işe yaradı edilir. Ama benim telefonumda değil. Bu yüzden problemin nerede olduğunu bilmiyorum.

Bu yüzden tüm kodumu soruya ekledim. Bu benim çalışmamı sağlamak için çok önemli.

Lütfen bana yardım edin. Herhangi bir yardım için teşekkürler. :)

Answer 1

İhtiyacınız olan bu mu?

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

Kullanım span etiketi, içerik div doldurma vermek eğer hesaplar içerik div coz için geciktirme belirtilmesi gibi ek yükseklik% 100 + 4em yüzden ..

Ve Sayfanızda height:100% kullanmak istediğinizde html ve body yüksekliğini% 100 olarak belirttiğinizden emin olun.

Answer 2

Bunun için pencere yüksekliğini almanız ve .page için ayarlamanız gerekir. Her neyse, bunun için biraz javascript eklemeniz gerekebilir. Çözüm için jQuery kullandım. [Diğer kütüphaneyi kullanabilirsin, senin için.

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

İşte

biçimlendirme olduğunu bu çözüm] öneriyorum

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

Sadece bu keman bağlantıya bakınız - (canlı demo) - http://jsfiddle.net/LZT7B/