固定高さの100％のdivのスクロール可能なコンテンツを作成

Question

私はスクロール可能なdivを作成したいと思います。私はここにたくさんの例があると知っていますが、どちらも私のために働いていません。

私のモバイル画面に表示される.pageクラスがあります。その中に私は.content divを持っています。これにはページの内容が含まれています。コンテンツを上部から整列させるだけであり、コンテンツがコンテンツの境界から外れている場合はコンテンツをスクロールする必要があります。

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

有効にするにはどうすればよいですか？

更新

私はバイオリンでそれを試みたが、それが働いています。しかし、私の電話ではありません。そのため、どこに問題があるのか​​わかりません。

私はこの質問に私のコード全体を添付しました。これは私がそれを働かせるために非常に重要です。

私を助けてください。助けてくれてありがとう。 :)

Answer 1

これはあなたが必要なものですか？

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

使用spanタグを使用すると、コンテンツのdivにパディングを与える場合、それは計算し、コンテンツのdivだってのためのパディングを指定するなどの追加の高さを100％+ 4em ..だから

そして、あなたのページにheight:100%を使用するときはいつでもhtmlとbodyの高さを100％と指定してください。

Answer 2

窓の高さを取得する必要があります。.pageに設定する必要があります。とにかく、あなたのためにいくつかのjavascriptを追加する必要があります。私は解決のためにjQueryを使用しました。 [他のライブラリを使用することもできます。

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

ちょうどこのフィドルのリンクを参照してください、私はここで

がマークアップである]あなたにこのソリューションを示唆しています - http://jsfiddle.net/LZT7B/