css - 新しい表示高さを div に強制し、残りをスクロールバー機能で表示する方法は?

Question

高さ<div id='x' />300pxの

<div id='y' />その中に高さ600pxのを入れたい

これを行うと、Y div が最大 300px (高さ) まで表示され、残りが表示されるように Y 軸のスクロールバー機能を追加するように、完全な高さで表示されます。

Y divに追加overflow-y:visibleしていますが、必要な結果が得られず、何も変わりません

私はWeb開発にかなり慣れていないので、ネストされたdivや高さの強制、スクロールバーの追加などに関してはかなり混乱します..

この特定のケースでは、私が望むものをどのように正確に達成できますか?

score 1 · Accepted Answer

オーバーフローを非表示にする場合は、これを行います

#x {overflow: auto};

内部にスクロールバーを作成したい場合は、これを行います

#x {overflow: scroll};

score 1 · Accepted Answer

それはとても簡単です。overflow:scroll;Y 軸のスクロールバーを表示するには、コンテナーに適用するだけです。このフィドルをチェックしてください http://jsfiddle.net/DeepakKamat/vBFJG/3/

要素を #y 要素からオーバーフローさせたい場合、overflow:visible;#yに追加しても何も起こりません。<div>

score 1 · Accepted Answer

1

オーバーフローを試してください: auto; ID x の div で

于 2012-11-11T15:25:12.850 に答える

score 1 · Accepted Answer

あなたが思うようにうまくいくとは限りません。ここで他の回答を使用すると、x 用と y 用の 2 つのスクロールバーが表示されます。x を overflow:hidden に設定すると、x は適切なサイズのままですが、y のスクロールバーが x の下部を超えてしまいます。

あなたがしたいことは、両方の div を同じサイズ (または x より小さい y) に設定し、オーバーフローに仕事をさせることです。とにかくスクロールするのであれば、y を大きくしても意味がありません。

#x{max-height:100px;height:100px;overflow:hidden;}
#y{height:100px;overflow-y:scroll;}

4 に答える 4