1

これが私のフィドルです：http://jsfiddle.net/34TM4/1/

ご覧のとおり、赤divの幅は 100% です。青divの幅は 800px です。右にスクロールして残りの 800px div を表示すると、100% div が停止していることがわかります...

幅100%に設定していますが、必ずしもスクロールに追従するとは限りません。何故ですか？これを機能させる方法はありますか？スクロールしても、常に画面の 100% を埋める 100% の幅を使用しますか?

4

4 に答える 4

3

これは、要素の親が何であれ、100% が幅の 100% として定義されるためです。この場合、親要素がないため、ウィンドウ (フレーム) が親になります。したがって、他の要素がウィンドウの幅よりも広い場合でも、100% がウィンドウの幅になります。

両方の div を別の div でラップし、その新しいコンテナ div の幅を 800px にすると、100% の div は 800 ピクセルに拡張されます。

于 2012-07-20T19:28:02.073 に答える
1

右にスクロールして残りの 800px div を表示すると、100% div が停止していることがわかります...

幅をパーセンテージとして設定すると、親要素のそのパーセンテージに適応することを意味します。の場合div#container、ビューポートの幅に適応するため#container、右にスクロールすると停止します。

この問題を解決するには、 を の と等しくなるように設定min-widthしcontainerますdiv#test。

#container {
    width: 100%;
    height: 30px;
    background: #d45;
    min-width: 800px
}

JS フィドル: http://jsfiddle.net/34TM4/6/

于 2012-07-20T19:30:20.413 に答える
1

パーセンテージ幅は、要素を含むブロックを参照します。最初の包含ブロックはビューポートです。100% 要素の包含ブロックをビューポート以外のものにする必要があります。これを実現するには、100% 要素を非パーセンテージ幅要素内に入れ子にします。たとえば、フィドルを次のように変更します。

<div id="blam">
<div id="container"></div>
<div id="test"></div>
</div>


#blam
{
    width: 900px;
}
于 2012-07-20T19:28:10.857 に答える
0

それを解決する最も簡単な方法はmin-width: 800px、次のようにプロパティを追加することです: http://jsfiddle.net/34TM4/2/

于 2012-07-20T19:26:51.837 に答える