2011-10-25 13 views
0

DIVをウィンドウ幅の100%ではなくページ幅の100%に設定したいと思います。DIVを全幅にスケールするにはどうすればよいですか?

私のコンテンツがブラウザのウィンドウより広い場合、DIVはページの中央で終了するのではなく、フル幅に縮尺します(width: 100%と同じ)。

width: 200%; overflow: visible;でDIVにネストするのは基本的には動作しますが、すべて200%に沿ってスクロールできるという副作用があります。それでもコンテンツがウィンドウの幅の2倍を超えると、divは空中で終了します。

例:http://jsfiddle.net/nm64V/(私のプロジェクトで、私はそれがウィンドウ幅を超えてしまうときコンテンツが可能となりますどのように広いかわからない、3000px幅の広い内容は一例であることに注意してください)

私はどのように記述された振る舞いを達成するか?

+0

は、あなたのHTMLとBODYスタイルが同様に100%に設定幅を持っていますか? この特定のDIVは他のタグ(BODYタグ以外)にネストされていますか? DIVを正しく動作させるには、 'display:...'と 'position:...'プロパティを忘れているかもしれません。 – bigp

+0

これは 'margin:0'を持っている包括的なラッパーDIVにネストされています。このラッパーの上の次の要素はBODYです。 –

答えて

1

私はあなたが何をしたいとは考えていないことのように可能です。おそらく、達成したいことの具体的な例を挙げる必要があります。

これまでのところ、私はうまくいくと思っています。周囲の要素にはがあります。それ以外の場合はdisplay: table-cellです。表のセルは内容に合わせて伸びるからです。 display: table-cellをサポートしていない旧式のブラウザをサポートする必要がある場合は、コンテンツの周りにセル化された単一の表を追加してみてください。

例:http://jsfiddle.net/nm64V/2/

0

あなたは、正確に何をしようとしているのかの例を提供するべきでしょう。 DIVはブロック要素であるため、空でも浮動小数点でもない限り、DIVは常に使用可能なすべての幅を取ります。

DIVとかそのページのどこかに書かれている「内容」は、

+0

私の質問に事例を追加しました。 –

1

私が理解しているように、divのすべてのコンテンツをコンテンツのサイズにラップすることで、この問題を解決できます。あなたの例を使用する:今すぐ

<div style="margin: 0"> 
    <div style="width: 3000px;"> 
     <div style="width: 100%; border: 1px solid red;"></div> 
     <div>... Your long content goes here ...</div> 
    </div> 
</div> 

、あなたは(赤枠付き)(たとえば、1500px)、内側のdiv要素の両方にコンテナのdivを設定し、あなたのコンテンツが、それは超えて伸びていても、その幅になりますどんな幅ブラウザウィンドウ。

コンテナ部門のサイズがわからない場合は、 'style = "width:3000px;"'行を取り出しても機能します。

例:http://jsfiddle.net/nm64V/1/

関連する問題