0

私は、5 つの水平 div を持つ Web サイトを持っています。これらはすべて float:left で、幅は % です。テキストを入れたい左のものとスクロールバー。ただし、スクロールバーは、position:absolute を指定した場合にのみ表示されます。jsfiddle で試してみてください。私がそうすると、divは他の4つを無視し、それらは外れます。これを回避するにはどうすればよいですか?

jsfiddle > http://jsfiddle.net/QN8RS/ 追加 position:absolute; CSS の次の div に。あなたはそれが動作するのを見るでしょうが、divは場違いになります..

#left{
    float:left;
    background-color:#C00;
    width:15%;
    height:100%;
    overflow:auto;
    top: 0px; 
    bottom: 0px;
}
4

4 に答える 4

2

の高さを指定していない<body>ため、高さは として計算されautoます。

の高さを.mainとして指定しました100%。これはパーセンテージです。その親 (ボディ) の高さは として計算されるautoため、計算された高さもautoです。

の高さを#leftとして指定しました100%。これはパーセンテージです。その親 (.main) の高さは として計算されるautoため、計算された高さもautoです。

高さはautoであるため、すべてのコンテンツを保持するために必要なため、高さ as は高さです。

を設定overflow: autoしたため、コンテンツが要素よりも背が高い場合にのみスクロールバーが表示されます（そうではありません）。

の計算された高さが ではなくビューポートの高height: 100%さになるように、html 要素と body 要素に設定します。#leftauto

于 2013-10-03T13:33:43.117 に答える
0

私はあなたが探していると思います： overflow-y: scroll

リトル・フィドル

于 2013-10-03T13:28:36.440 に答える
0

その理由はheight:100%、 div で指定したためです.main。何の100％？どの親？

body の高さを 100% に指定すると機能します。

html, body { height: 100%; }

更新されたフィドルを確認してください: http://jsfiddle.net/QN8RS/2/

于 2013-10-03T13:33:52.180 に答える
0

フロートを使用する代わりにposition: absolute;andを使用しleft: number%;てください (各要素の残りの % を計算する必要があります)。

フィドルをチェックしてください: http://jsfiddle.net/QN8RS/3/

于 2013-10-03T13:34:52.600 に答える