パーセンテージの高さのdivに垂直スクロールバーを適用するにはどうすればよいですか？

Question

私は同じような性質の多くの質問に出くわしましたが、私の状況は少し異なります。私の外側のコンテナは、固定された高さの代わりに高さ100％です。

私は容器の中にdivの束を持っています。オーバーフローし、スクロールを許可するスクロールバーが必要です。 、私は投稿のリンクが固定height: 200px;を持っている場合を除きhttp://jsfiddle.net/jcjw2jmo/

：

これはまさに私が達成したいものです。代わりに高さのパーセンテージが必要です。

heightとmax-heightの値を設定してみました。ここで私の進歩です：http://jsfiddle.net/k52eh0xr/

どのように私は同じ動作をする代わりにパーセンテージを使用して取得するのですか？

ありがとうございました

PSです。私は、これはJavascriptを/ jQueryのを使用して行うことができますが、私は

Answer 1

は、私はあなたが

html, body {height:100%} 

をしたいようなので、あなたがパーセントを使用することができます height:100%であなたの htmlと bodyタグを設定する必要があると思うCSSのみのソリューションを探しています知っています

DEMO

Answer 2

この問題は、主にCSSのパーセンテージの高さを使用することと関連しています。

子要素にパーセンテージの高さを使用する場合は、bodyとルート要素（html）までのspecify the percentage height for all parent elementsが必要です。

あなたのコードでこれを試してみてください：

HTML（変更なし）

CSS

/* NEW */ 
html, body { 
    height: 100%; /* necessary when using percentage heights within body 
        on non-absolutely positioned children (such as .outer) 
        more info: https://stackoverflow.com/a/31728799/3597276 */ 
    overflow: hidden; /* prevent vertical scrollbar on browser window, 
         in conformance with demos posted in question */ 
} 

.outer { 
    border: 1px solid black; 
    height: 50%; /* ADJUSTED */ 
    /* max-height: 10%; REMOVED */ 
    overflow-y: scroll; 
    width: 300px; 
} 

.inner { 
    /* height: 10%; REMOVED 
    max-height: 10%; REMOVED */ 
} 

.item { 
    background: grey; 
    border: 1px solid red; 
    height: 50px; 
} 

DEMO：http://jsfiddle.net/k52eh0xr/5/