3

他のdivを含むdivを配置するとoverflow-auto、それらのサブdivの幅は、スクロール可能な領域の幅ではなく、親の表示部分の幅になることがわかりました。

            問題の例

http://jsfiddle.net/UdgCE/で例を見ることができます。

代わりに、スクロール可能な領域の全幅を幅として指定する方法はありますか?

4

2 に答える 2

1

これが理想的かどうかはわかりません。おそらく、あなたが意図していることに完全には答えていないか、一致していません。

ただし、スクロール可能なコンテナー内のコンテナーは、コンテナーがウィンドウを引き伸ばす方法に匹敵する同様の動作を示すように見えます。たとえば、div を使用するheight:100%;とwidth:100%;、ビュー ポートが引き伸ばされますが、それ以上のことはありません。

それを念頭に置いて、しばらくいじった後、私が見つけた唯一の純粋な CSS ソリューションは、特定の「一致する」ピクセル値を内側/外側のコンテナーに設定することです。

ここに例があります... http://jsfiddle.net/krishollenbeck/UdgCE/27/

HTML

<html>
  <body>
    <div style="overflow:auto" id="container"> 
      <div id="inner-wrap">        
          <div  style="white-space:pre" id="content">
             This is a the text of the first div and it's veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long
          </div>
        </div>
      <div style="background-color:#FFFF00" id="yellow">
        &nbsp;
      </div>
    </div>
  </body>
</html>

CSS

#yellow {
  width:2000px;    
}

#container {
 border:1px solid red;
    width:400px;
}
#content { 
    width:2000px;    
    border:1px solid #333;
}

#inner-wrap {
 width:2000px;   
}
​

これはほとんど理想的とは思えませんが、うまくいくようです。おそらくJavaScriptを使用してスクロール可能なコンテナの幅を測定し、内側のdivをその寸法に合わせる必要があると思います。

于 2012-09-18T21:42:50.367 に答える
0

ラッパー div に「clearfix」を追加すると、修正されました。これにより、ラッピング div がテキストの幅に拡張されます。溢れるだけじゃない。

http://jsfiddle.net/7a67j/

于 2012-09-18T22:05:36.357 に答える