DIVの幅を常に100％にしたい

Question

以下の構成でページを作っています。

...

「div1」には背景色を設定し、横幅100％で表示しています。「div2」内のテーブル「table1」の内容はPHPで出力しているのですが、 iPhoneで表示したときに、テーブルの幅が大きくなる(画面の幅を超える)と、「div1」の幅が元々の画面サイズまでしか描画されません。テーブルの幅が大きくなった時に、「div1」も一緒に大きくなるようにするにはどうすればいいでしょうか。外枠用のテーブルを使えばできるのでしょうが、できれば構成を変えずにやりたいです。

ORUKA1951 · Accepted Answer

＞データを一覧表示する為のtableを入れます。　了解しました。　tableの目的から、table自体が広がるのは当然ですよね。これはスマホだろうがパソコンだろうが関係なく、横にスクロールしなければならないことは必然です。　それが入る親コンテナブロックの幅が指定されていても、すべてを表示しなければなりません!!!。ウィンドウ幅よりも広いとき横長の表が横スクロールを強制するのと同じです。　単純に

...

だとして、 div.header,div.section,div.footer{} に対してwidthを指定しなければ良いです。ルートのブロックは表示域を参照しますから、【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからルート要素の包含ブロック（これを初期包含ブロックと呼ぶ）はUAが定める。ルートではなく且つ絶対配置でもない要素の場合、最も近い祖先ブロック要素の内容辺が包含ブロックになる。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［視覚整形モデル詳細( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#containing-block-details )］より　 width:100%とすれば、ウィンドウ幅にされてしまうのは当然ですよ。デフォルトのautoのままにしておけばよいです。

satsumaimoboy · Answer

>「div1」には背景色を設定し、横幅100％で表示しています。あなた自身がこう指定したのだから >「div1」の幅が元々の画面サイズまでしか描画されません。こうなるのは当然でしょう、頭がおかしくなっていますね、そうでなければもともとHTMLとCSSを理解しきれていない >DIVの幅を常に100％にしたいと言っておきながら >テーブルの幅が大きくなった時に、「div1」も一緒に大きくなるようにするにはなどと問い、矛盾したことを同時に要求する、そして >外枠用のテーブルを使えばできるのでしょうがこれなどはまったく意味不明ですねほかの人も言い触れていますが、そもそもあなたが提示したHTMLの記述では何のために

が２重にを囲っているのですか？背景画像の上に

があるだけのページなら、

はまったく不要ですよ？おそらくリキッドレイアウトをとっているのでしょうがそれを勉強するときに、幅の最大値と最小値を設定するべきだというのを学ばなかったんですね

のmin-widthをiPhoneの幅より大きくとれば解決するはずです

ORUKA1951 · Answer

＞class="section"の中にテーブルを入れるとすると、
＞CSSをうまく書けば目的の処理ができるという事でしょうか？

そもそも、本当にtableなのですか？デザインのためではなく!!!

taloo · Answer

何も指定しなければ内容に合わせて広がるんじゃないでしょうか。

ORUKA1951 · Answer

tableやdivをデザインのために使ってませんか？・DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) ・単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 ) 　tableは二次元データを表すものです。したがって、そのデータ構成が分かるように必ずデータ分だけサイズが横に広がり表示されなければなりません。(枠・ウィンドウを越えても!!!) 　また、ブロックはサイズが指定されていればそれ以上は広がりません。広がらないためにサイズを指定するのですからね。　しかも含む内容と関係ないブロックの幅が広がるはずもありません。 ★tableを使用したデザインをやめること!! 　これは必須です。本当にtableなら枠をはみ出しても表示して良いのです。 ★divは、HTML5では、　Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html#the-div-element ) 　・・DIVは多に適当な要素がないときの最終手段として使うことになります。・・・　HTML4では適当な要素がありませんから、class名を使ってきました。単純に　

タイトル

本文

　 HTML5なら　

タイトル

本文

　としましょう。

CyberCypher · Answer

iPhoneですか？……
一応styleに「#div1{width:100% !important;}」で常に100%ですけど
ローテーション時にサイズ変更したいとのことなのでそういうことではないですよね？

javascriptなら以下
window.onorientationchange = function() {
　　//bodyやdivのサイズ変更
　　document.body.style.Height = "100%";
　　document.getElementById("div1").style.Height = "100%";
}
画面サイズよりもコンテンツや要素のサイズが小さい場合100%にはならないので
bodyもサイズ変更するのをオススメします

DIVの幅を常に100％にしたい

＞データを一覧表示する為のtableを入れます。

>「div1」には背景色を設定し、横幅100％で表示しています。

この回答への補足

＞class="section"の中にテーブルを入れるとすると、

この回答への補足

何も指定しなければ内容に合わせて広がるんじゃないでしょうか。

tableやdivをデザインのために使ってませんか？

この回答への補足

iPhoneですか？……

この回答への補足

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング