DIVの幅を常に100％にしたい
- 「div1」に背景色を設定し、横幅100％で表示していますが、テーブルの幅が大きくなると「div1」の幅も元の画面サイズまでしか描画されません。テーブルの幅が大きくなった時に、「div1」も一緒に大きくなる方法はありますか？
- テーブルの幅が画面を超えると、「div1」の幅も元の画面サイズまでしか描画されません。テーブルの幅が大きくなった時に、「div1」も一緒に大きくなる方法はありますか？
- 「div1」には横幅100％の背景色が設定されていますが、テーブルの幅が大きくなると「div1」の幅も元の画面サイズまでしか描画されません。テーブルの幅が大きくなった時に、「div1」も一緒に大きくする方法はありますか？
- ベストアンサー
DIVの幅を常に100％にしたい
以下の構成でページを作っています。 <body> <div id="div1"> </div> <div id="div2"> <table id="table1">...</table> </div> </body> 「div1」には背景色を設定し、横幅100％で表示しています。 「div2」内のテーブル「table1」の内容はPHPで出力しているのですが、 iPhoneで表示したときに、テーブルの幅が大きくなる(画面の幅を超える)と、 「div1」の幅が元々の画面サイズまでしか描画されません。 テーブルの幅が大きくなった時に、「div1」も一緒に大きくなるようにするにはどうすればいいでしょうか。 外枠用のテーブルを使えばできるのでしょうが、できれば構成を変えずにやりたいです。
- luca20110205
- お礼率66% (12/18)
- HTML
- 回答数6
- ありがとう数1
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
＞データを一覧表示する為のtableを入れます。 了解しました。 tableの目的から、table自体が広がるのは当然ですよね。これはスマホだろうがパソコンだろうが関係なく、横にスクロールしなければならないことは必然です。 それが入る親コンテナブロックの幅が指定されていても、すべてを表示しなければなりません!!!。ウィンドウ幅よりも広いとき横長の表が横スクロールを強制するのと同じです。 単純に <body> <div class="header"> </div> <div class="section"> <table summary="何たらの表">...</table> </div> <div class="footer"></div> </body> だとして、 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のままにしておけばよいです。
その他の回答 (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/2281)
何も指定しなければ内容に合わせて広がるんじゃないでしょうか。
- 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%のままなので、右側にスペースができてしまう という状況です。
関連するQ&A
- divの横幅 自動調整
PHP + MySQL +html + CSS で動的テーブルを表示するサイトを制作しています。 <div id="○○○"> <table></table> </div> といったように、中のテーブルをdivで囲ってコーディングしています。 外側をdivで囲い横幅を指定してあげて、テーブルに横スクロールバーを表示させているのですが、divで指定した横幅よりもテーブルの横幅が短くなった場合、外のdivの幅がテーブルに合わせて短くならないのですが、このような場合、何か対処法はございますでしょうか。 superTable.jsを使用しており、このjsの使用がテーブルの外側にdivをおき、cssを使ってdiv側にスクロールバーを表示される仕様になっております。 以上、よろしくお願い致します。
- ベストアンサー
- CSS
- テーブル幅を完全に１００％にしたい
テーブルの幅を画面の端っこから端っこまでの完全なる100％にしたくて以下のようにしたのですが、どうしてもブラウザの端の方が微妙にあいていて白色が見えます。 <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#0E2C49" bgcolor="#003300"> <tr><td>test</td></tr> </table> どうすれば完全に幅100％になりますか？ できる限り<div>は使いたくありません。 tableで構成しているし、なにより<div>の使い方を知らないからです。 また、ヘッダー部分を作っているので、できれば画面下の余白も全くない状態にしたいと考えています。 協力お願いします。 ちなみにソフトはDreamweaver8使っています。
- ベストアンサー
- HTML
- Divの幅指定を無視して子テーブルの幅に合わせて全体が伸びてしまいます
はじめて投稿します。 下のHTMLを表示したとき、menuの部分が狭くなった上に画面自体のスクロールバーが出て横に広がってしまいます。 赤色のテーブルをウィンドウいっぱいに広げた状態で、オレンジ色のテーブルを囲むDIVタグを赤色のテーブルの80%にしたいのです。 オレンジ色テーブルのwidthの80%になっているとか？ でも、オレンジ色のテーブルのwidthがウィンドウに収まるような値なら、意図する表示になるのですが・・・。 どう直したらいいのでしょうか。 <html> <script> function hoge(){ document.getElementById("s1").innerText = "t1=" + document.getElementById("t1").offsetWidth + "*" + document.getElementById("t1").offsetHeight + ",d1=" + document.getElementById("d1").offsetWidth + "*" + document.getElementById("d1").offsetHeight + ",t2=" + document.getElementById("t2").offsetWidth + "*" + document.getElementById("t2").offsetHeight + ",d2=" + document.getElementById("d2").offsetWidth + "*" + document.getElementById("d2").offsetHeight + ",t3=" + document.getElementById("t3").offsetWidth + "*" + document.getElementById("t3").offsetHeight; } </script> <body onload="hoge()"> <span id="s1"></span> <table width="100%" height="95%" border="1" style="background-color:red;" id="t1"> <tr> <td valign="top" width="200px">menu</td> <td valign="top"> <div style="background-color:yellow" id="d1"> <table border="1" style="background-color:blue" width="90%" height="100%" id="t2"> <tr><td>hoge1</td></tr> <tr><td>hoge2</td></tr> <tr> <td> <div style="background-color:pink;overflow:auto;height:80%;width:80%" id="d2"> <table id="t3" width="3250" height="500" style="background-color:orange"> <tr> <td>hoge3</td> </tr> </table> </div> </td> </tr> </table> </div> </td> </tr> </table> </body> </html>
- 締切済み
- HTML
- divのheight指定で画面一杯に表示したい
よろしくお願い致します。 <div>の<height>を100%に指定して、 タブレット等での表示時、縦でも横でも画面一杯に 表示させたいと考えています。 とりあえず css で以下は宣言済みです。 html, body { height: 100%; margin: 0px; padding: 0px; } 親子構造としては以下を想定しています(いくらか簡略化しています) <html> <body> <div id="H" style="height:60px;"> (1)ここにヘッダー的なもの </div> <div id="B" style="height:100%; overflow: auto;"> (2)この部分を縦一杯にしたい </div> </body> </html> (2)の部分にはjavascriptでサーバから取得した XMLのデータを埋め込んでおります。 その際、選択行の色付け等を行いたかった為、 大枠を<div>でくくり、その中に<table>で表組みしています。 最終的な構造は以下のようになっているはずです。 <div id="B" style="height:100%; overflow: auto;"> <div id="rdiv1"><table id="rtbl1"><tr><td ・・・ /td></tr></table></div> <div id="rdiv2"><table id="rtbl2"><tr><td ・・・ /td></tr></table></div> <div id="rdiv3"><table id="rtbl3"><tr><td ・・・ /td></tr></table></div> ・・・ </div> 行ごとの<div>や、その中の<table>でも height: 100%; は指定しています。 また、1行あたりの高さは<td style="height: 40px;">と指定しています。 (rowspanを使ってのぶち抜きを行っているため) html と body に height:100%; を指定しているので、 予想ではヘッダー用のdivが指定の高さで表示され、 次のdivが残りの高さ分一杯に表示。 その中のデータは overflow:auto; でスクロールできる。 と考えていたのですが、実際はjavascriptで埋め込んだdiv、 及びtableの高さまで伸びてしまい画面上を大きくはみ出してしまいます。 （divのoverflowが全く機能しません） 100%ではなく 500px としてみたところ、 そのサイズに収まってスクロールできました。 （縦一杯ではありませんがdivのoverflowは機能しました） 何とか height 100% を実現して、 divのスクロールバーのみでの表示を行いたいのですが、 何か指定が足りないのでしょうか？
- ベストアンサー
- CSS
- テーブルの横幅を常にブラウザ一いっぱいに表示するに
テーブルの横幅を常にブラウザ一いっぱいに表示するには？ たとえば *********************************************** <HTML> <HEAD> <TITLE>test</TITLE> </HEAD> <BODY> <table border=1 cellspacing=0 cellpadding=0> <caption>キャプション</caption> <tr> <td>内容1</td> <td>内容2</td> </tr> </table </BODY> </HTML> *********************************************** を作ると、画像のようにコンパクトに表示されてしまいます。 やりたい事はブラウザの横幅が １０cmなら画面いっぱいテーブルを表示させて、 ２０ｃｍなら画面いっぱいにテーブルを表示させたいです。 <table border=1 cellspacing=0 cellpadding=0 width="2000"> するとはみ出してしまうし、 <table border=1 cellspacing=0 cellpadding=0 width="1000"> だと小さすぎます。 誰がどのブラウザで開いても、横幅は画面いっぱいに入るように表示するにはどういうタグを書けばいいのでしょうか？
- ベストアンサー
- HTML
- HTMLで横幅をCSSで設定できません。
HTMLで横幅をCSSで設定できません。 headerを作成しているのですが、画像のように横幅が外枠の wrapperをはみ出して表示されてしまいます。 はみ出した値は5pxとpaddingで指定した値と一致します。 headerをtableタグで作成した場合、横幅700pxの枠中での padding-left:5px;になり、横幅には変化はありません。 しかし、<div id="header">で横幅を700pxとし、 padding-left:5px;とすると、headerの横幅が 5px増えてしまいます。 <div id="header">の横幅を変化させずに、 paddingを指定することは可能なのでしょうか。 わかる方いらっしゃいましたら宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; } #header { width: 700px; padding-left: 5px; }
- ベストアンサー
- HTML
- 固定幅div内のテーブルセルの幅指定方法
幅を指定して横スクロールバーを有効にしたdivがあります。 その中に、divよりも幅の広いtableを置き、thやtdの幅を指定したいのですが、有効になりません。 tableへの幅指定は有効になるのですが、内容が動的に変化するので、セル単位で幅を指定したいと思っています。 解決方法がありましたらお願いいたします。 HTML：標準モード UA：Windows xp IE6 サンプルコード： <style> div{ height:200px; width:200px; overflow-x:scroll; border:#f99 solid 1px; } table{ background:#ddd; border:#666 solid 1px; } td{ width:100px; border:#666 solid 1px; } </style> <div> <table> <tr> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> </tr> </table> </div>
- ベストアンサー
- HTML
- CSS・DIVについて
CSS初心者ですが、質問させていただきます。 ＜やりたいこと＞ 同一ページ内にて、下記の(1)(2)をCSSで指定したい。上から(1)(2)(1)の順で表示したい。 (1)幅700、文章中央揃え (2)幅600、文章左揃え ＜私が作成したもの＞ （関係ない部分は省略しています。） （実際は、(1)(2)の部分は半角英字の名前をつけています） <head> <style type="text/css"> body { text-align: center; } div#(1) { width: 700px; margin: 0 auto; text-align: center; } div#(2) { width: 600px; margin: 0 auto; text-align: left; } </style> </head> <body> <div id="(1)">タイトル</div> <div id="(2)">説明文</div> <div id="(1)">ホームに戻る</div> </body> ＜表示のされ方＞ (1)は正常に表示されているのですが、(2)にはCSS自体が適用されていないのです。 ちなみにIE9では私の思うように表示されるのですが、IE10になって表示されなくなりました。 なぜこのようになったか、お教えいただけますでしょうか。よろしくお願いいたします。
- 締切済み
- CSS
- CSSで画像を常にスクリーンの中央に表示させるコマンドは？
Dreamweaver MX2004を使用して、サイトを作成しています。 ページ構成は至ってシンプルで、背景とその中央に表示される（はずの；）フラッシュ画像です。 具体的には・・・ - <body></body>に画像を背景として表示 - <body></body>の中にdivタグでくくった箱を作り、その中にswfファイル内包 としています。 スクリーンの大きさに関わらず、常に中央にフラッシュ画像(divタグでくくったswf）が表示されるようにしたいのですが、左右の中央揃え（寄せ？）はmargin: auto;で出来たものの、フラッシュ画像が画面の一番上に張り付いたままです。 divタグを<center></center>でくくってみたりもしましたが、結果は同じ・・・ フラッシュ画像を<table></table>に内包してスクリーンの中央に表示させるやり方は知っているのですが、CSSのみで同じ事は出来ないでしょうか？ 色々な本やサイトを調べましたが分かりません。 ご存知の方いらっしゃいましたら、教えて下さい。 ヨロシクお願いします。
- 締切済み
- ホームページ作成ソフト
- 2つのテーブルの幅を一致させたい
以下のHTMLで、2つのテーブルのセル幅が一致しません。 JavaScriptではヘッダのセル幅をボディのセル幅に合わせています。 ボディ部分の文字列をすべて日本語にするとうまくいくのですが・・・ JavaScriptというよりはHtmlの問題な気がしますが、よろしくお願いします。 jqueryを使用しています。 <html> <head> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { headerTableWidthFit(); }); $( window ).resize(function(){ headerTableWidthFit(); }); function headerTableWidthFit() { var i = 0; $('#resultBodyTable table tbody tr:eq(0) td').each(function() { $('#resultHeaderTable table th').eq(i).width($(this).width()); i++; }); } </script> </head> <body> <div id="container"> <div id="resultHeaderTable" class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> <th>お</th> <th>か</th> <th>き</th> <th>く</th> </tr> </thead> </table> </div> <div id="resultBodyTable" class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> <td>お</td> <td>か</td> <td>き</td> <td>く</td> </tr> </tbody> </table> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
お礼
何度もご教示頂き、有難うございます。 教えて頂いた通り、widthの指定を無くしたらうまくいきました。