0

div既存の固定サイズではないサイズに非常に幅を追加しようとしていますdiv。最小限の例を次に示します（jsfiddle）。

<html>
    <head/>
    <body>
        <div style="float: right; border: 1px solid green;">
            Some content
            <div id="problematic-div" style="border: 1px solid red; overflow: auto;">
                This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
                It_should_have_a_horizontal_scrollbar_instead
            </div>
            Some content here too
        </div>
        Main content goes here
    </body>
</html>

何が起こるかというと、大きなインナーdivがアウターdivをストレッチさせてフィットさせます。div外側のdivのサイズを変更せず（代わりに、内側がない場合のサイズを維持するため）、代わりに内側divに水平スクロールバーを表示させたいと思います。

divこれは、アウターの大きさを知ることができ、インナーdivをそれに制限することができれば非常に簡単ですが、ここでは、アウターのサイズ基準を「すべてのインナーに合う幅を使用するwidth」にしたいと思います。その広い内側を除いて要素。divdiv

これを行うには、高さではなく幅のみdivのサイズ計算から内側を無視する必要があると思います。これを行う方法がわかりません。私はいくつかのことを試しました：

  • 外側divをに設定してpositionからrelative、内側をに設定しabsoluteます。これは、外側divが内側のスクロールバーによって引き伸ばされなくなった範囲で機能しますが、水平スクロールバーは表示されず、その位置は外側のdivの左上隅から0.0になり、一部と重なっています。外部divのコンテンツ
  • 内側のdivフロートを作成し、次のように2つの要素の間にラップclear: bothします。これにより、外側の要素が伸びます。

。

<div style="clear: both;"></div>
<div id="problematic-div" style="border: 1px solid red; float: left; overflow: auto;">
    This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
    It_should_have_a_horizontal_scrollbar_instead
</div>
<div style="clear: both;"></div>
Some content here too
  • いくつかのMozillaベンダーのプレフィックスwidth（min-content、、 ）ですがfit-content、availableどれも私が望む効果を持っていないようです

要するに、このページにある上記のHTMLコードのような効果が欲しいのですが、このページでは、質問コンテナに固定幅を設定することでそれを実現しています。そのようなことは可能ですか？

4

2 に答える 2

1

固定幅を設定せずにこれを行うことを考えることができる唯一の方法は、これを行うことです。

http://jsfiddle.net/pgRd5/

内側のdiv幅を0に設定し、オーバーフローを強制的に表示します。次に、外側のdivでオーバーフローをautoに設定すると、スクロールバーが外側のdivに表示されます。内側のdivにスクロールバーが必要な場合は、運が悪いです。

これは世界で最善の解決策ではないため、この例のようにサイドバーにmax-widthプロパティを設定することをお勧めします。

于 2012-05-14T02:18:07.363 に答える
1

コメントで述べたように、実際にその制限を指定せずに幅を制限することはできません。パーセンテージやメインの列幅の設定など、ページ上の列のサイズ設定に関するガイドはありますか？そうしないと、ページは各列に割り当てるスペースの量を認識せず、ページの外観は予測できなくなります。

幅を設定したくない理由は、画面の全幅を使用できるようにするためです。したがって、右側のサイドカラムの30％などのパーセンテージを使用することをお勧めします。これにより、予測可能なレイアウトが提供され、外側のdivに制限を指定したため、内側のコンテンツで必要なスクロールバーを実現することもできます。例えば

<div style="float: right; width:50%">
    Some content
    <div id="problematic-div" style="overflow-x: scroll; width: 100%;">
        This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
        It_should_have_a_horizontal_scrollbar_instead
    </div>
    Some content here too
</div>

そのクロスブラウザをテストする必要がありますが、ほとんどのブラウザで機能するはずです）

于 2012-05-14T02:57:30.010 に答える