- ベストアンサー
DIVの幅を常に100％にしたい
- 「div1」に背景色を設定し、横幅100％で表示していますが、テーブルの幅が大きくなると「div1」の幅も元の画面サイズまでしか描画されません。テーブルの幅が大きくなった時に、「div1」も一緒に大きくなる方法はありますか？
- テーブルの幅が画面を超えると、「div1」の幅も元の画面サイズまでしか描画されません。テーブルの幅が大きくなった時に、「div1」も一緒に大きくなる方法はありますか？
- 「div1」には横幅100％の背景色が設定されていますが、テーブルの幅が大きくなると「div1」の幅も元の画面サイズまでしか描画されません。テーブルの幅が大きくなった時に、「div1」も一緒に大きくする方法はありますか？
- luca20110205
- お礼率66% (12/18)
- HTML
- 回答数6
- ありがとう数1
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (5)
- satsumaimoboy
- ベストアンサー率0% (0/1)
>「div1」には背景色を設定し、横幅100％で表示しています。 あなた自身がこう指定したのだから >「div1」の幅が元々の画面サイズまでしか描画されません。 こうなるのは当然でしょう、頭がおかしくなっていますね、そうでなければもともとHTMLとCSSを理解しきれていない >DIVの幅を常に100％にしたい と言っておきながら >テーブルの幅が大きくなった時に、「div1」も一緒に大きくなるようにするには などと問い、矛盾したことを同時に要求する、そして >外枠用のテーブルを使えばできるのでしょうが これなどはまったく意味不明ですね ほかの人も言い触れていますが、そもそもあなたが提示したHTMLの記述では何のために<div>が２重に<table>を囲っているのですか？ 背景画像の上に<table>があるだけのページなら、<div>はまったく不要ですよ？ おそらくリキッドレイアウトをとっているのでしょうが それを勉強するときに、幅の最大値と最小値を設定するべきだというのを学ばなかったんですね <div>のmin-widthをiPhoneの幅より大きくとれば解決するはずです
補足
知り合いでもない人に頭がおかしいとか言われる筋合いはありません。 ネット弁慶がやりたいなら2ちゃんねるというサイトがありますので、 そちらで思う存分誹謗中傷をやり合ってくださいね。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞class="section"の中にテーブルを入れるとすると、 ＞CSSをうまく書けば目的の処理ができるという事でしょうか？ そもそも、本当にtableなのですか？デザインのためではなく!!!
補足
データを一覧表示する為のtableを入れます。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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名を使ってきました。 単純に <body> <div calss="header"> <h1>タイトル</h1> </div> <div class="section"> <h2>本文</h2> </div> <div class="footer"> </div> </body> HTML5なら <body> <header> <h1>タイトル</h1> </header> <section> <h2>本文</h2> </section> <footer> </footer> </body> としましょう。
補足
ご回答有難うございます。 現状、HTML5は使えません。 class="section"の中にテーブルを入れるとすると、 CSSをうまく書けば目的の処理ができるという事でしょうか？
- CyberCypher
- ベストアンサー率73% (39/53)
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もサイズ変更するのをオススメします
補足
ご回答有難うございます。 style、javascript共に試してみましたが、結果は変わりませんでした。 > ローテーション時にサイズ変更したいとのことなのでそういうことではないですよね？ ローテーション時だけではなく、テーブルの幅が100%を超えて大きくなった時に、 div1も一緒に大きくなって欲しいのです。 div1の幅を100%指定 →テーブルの内容によってテーブルの幅が100%を超える →div1の幅が初期の100%のままなので、右側にスペースができてしまう という状況です。
お礼
何度もご教示頂き、有難うございます。 教えて頂いた通り、widthの指定を無くしたらうまくいきました。