標準モードでのheight:100%,autoについて

前へ 次へ
このQ&Aのポイント
  • 標準モードでのheight:100%,autoについての解説と、テーブルの高さを自動にする方法について説明します。
  • 標準モードでは、bodyがauto、親要素がautoのとき、子要素のheightを100%に設定しても、それはautoと解釈される制約があります。
  • テーブルの高さを自動にすることはできないため、他の方法を検討する必要があります。
回答を見る
  • ベストアンサー

標準モードでのheight:100%,auto

heightについて。 標準モードだと、bodyがauto、 親要素がautoのとき、子のheightを100%にしてもそれはautoと解釈される と理解しています。 作りたいのは、テーブルの、 table自体は高さauto tdの中のdivは高さ100% なんですが、「標準モードだと」なかなかうまく行きません。 ↓こんな感じで作ってみたものの、これはtableの高さが100%です。 tableの高さを自動にすることはできないのでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <body> <style type="text/css"> html,body { height:100%; } </style> <table border="1" style="height:100%;"> <tr> <td style="height:100%;"> <div style="background:#fee;height:100%;">あいうえお</div> </td> <td style="height:100%;"> <div style="background:#eef;height:100%;">あ<br>い<br>う<br>え<br>お</div> </td> </tr> </table> </body> </html>

  • CSS
  • 回答数3
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

tableで行うとできなくもないが、それではHTMLとしてはおかしいのですから、本来は <body> 　<div class="header"> 　　<h1>見出し</h1> 　　<p>なんたらかんたら</p> 　</div> 　<div class="section"> 　　<div class="nav"> 　　　<ol> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　 </ol> 　　</div> 　　<div class="section"> 　　　<h2>見出し</h2> 　　　<p>本文・・・長い</p> 　　</div> 　</div> 　<div class="footer"> 　　<h2>文書情報</h2> 　</div> </body> のようなマークアップに対して、 div{border:solid 1px gray;} h1,h2{text-align:center;} div.section{position:relative; width:100%;min-height:600px;} div.section div.nav{position:absolute;top:0;left:0;width:20%;height:100%;background-color:yellow;} div.section div.section, div.section h2{margin-left:21%;width:79%;} div.section div.section{background-color:lime;} でよい。

charlie432
質問者

お礼

回答ありがとうございます。 まあ、変な書き方をするよりも、 教えてくださったように、シンプルで正しい書き方をするのが、 サイトのサイズ的にもSEO的にも色々な面で良いですよね。 IEではうまくいかないことが多いですが、そこら辺は柔軟に対応してゆきたいと思います。

その他の回答 (2)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

＞IEではうまくいかないことが多いですが、そこら辺は柔軟に対応してゆきたいと思います。 　いまやIE6は、3.64% 日本のバージョン別ブラウザシェアグラフ （StatCounter Global Statsより） ( http://lhsp.s206.xrea.com/misc/browser-share-version.html ) 無視せざるを得ないシェアまで落ち込んでいるとよいかと 「IE６以前のブラウザは表示が崩れるばかりかセキュリティ上も問題があるので、他の新しいブラウザをご利用ください」とメッセージを入れている。 　IE7以降なら、DOCTYPE スイッチで標準モードで動作するようにしています。 　先のサンプルもIE7以降では問題ないはずです。IE6も考慮すれば内容的に(強制的に)div.section div.sectionを大きくしておけばよいでしょう。 　floatを使う方法もありますが、floatは本文中で使うために使いたくないですね。

charlie432
質問者

お礼

回答ありがとうございます。 IE6は早く無くなってほしいですね。 floatも、高さを揃えるためにはJavaScriptを使わないと解決できないようなので、便利そうでなかなかやっかいだと思います。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

仕様書には 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 'height' 　Value: <length> | <percentage> | auto | inherit Initial: auto 　Applies to: all elements but non-replaced inline elements, 　　　　　　　table columns, and column groups 　　　<-- tableのcol,colgroup,非置換インライン要素以外のすべて 　Inherited: no　<------継承しない 　Percentages: see prose 　Media: visual ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［視覚整形モデル詳細( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#the-height-property )］より また、%の場合、ブロック要素は親ブロックの内寸を100として計算しますから、ちょっとへん。 　そもそも、一行しかないTABLEでセルの高さを(何を基準にするか不明ですが)100%にするという必然性がわかりません。スタイルシートを期待通りに働かせるために、HTML自体が正しくなきゃなりません。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より 　TABLEでマークアップすることがそもそもの間違いでは？ 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから ページレイアウトの目的で表を用いる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より <body> 　<div class="section"> 　　<div class="nav"> 　　　<h2>ナビ</h2> 　　</div> 　　<div class="section"> 　　　<h2>本文</h2> 　　</div> 　</div> </body> CSS div{border:solid 1px white;} div.section{height:100%;position:relatve;background-color:#ffeeee;} div.section div.nav{height:100%;position:absolute;left:0;top0;width:20%;background-color:#eeeeff;} だけでよいような・・

charlie432
質問者

お礼

回答ありがとうございます。 うまく質問出来ていなかったかもしれません。すみません。 ＞そもそも、一行しかないTABLEでセルの高さを(何を基準にするか不明ですが)100%にするという必然性がわかりません。 そうなんです。気持ち的には、100%ではなく、ここを「auto」にしたいのです。 しかし、そうすると「互換モード」だとOKなのですが、 「標準モード」だと、子要素の<td>の高さが100％にならないのです。 そこで、とりあえず、tableに任意のheightを持たせたらtdが100％になるので、仮にtableを100%にしただけです。 何を基準にするかは、「内容量に応じて」です。 100％にする必然性はありません。 tableの高さを100％ではなく、0％にすると上手く行く（内容量に応じてtableの高さが変わる）ブラウザもあるのですが、 OperaとIEで上手く行きません。 あ、すみません、お聞きになられた「セルの高さを100％」というのはtdの高さでしょうか？↑はtableを100％にした理由ですが、 tdを100％にしたのは、（tdの中の例えばdivの）バックグラウンドや罫線をテーブルの一番下まで付けたい（divの高さを100％にしたい）からです。（td自体にかければ良いではないか、と思われるかもしれませんが、罫線の上下にわずかにマージンを付けたいからです） （こんな感じ↓） あいうえお│あ 　　　　　　　│い 　　　　　　　│う 　　　　　　　│え 　　　　　　　│お お示しくださったコードは、「ナビ」「本文」のところが複数行になった時、独立してそれぞれの内容に応じた高さになるような気がしますが、如何でしょうか。（ちなみに「本文」は左に20％のマージンを持たないと重なって見えなくなってしまいますよね？） 左右の高さをそろえ、しかも内容に応じてtableの高さを「自動」にしたいのが質問の意図です。 http://kikky.net/pc/html_table_tec07.html の説明で言うと、 height:120px の120pxを自動にしたいということです。

charlie432
質問者

補足

＞TABLEでマークアップすることがそもそもの間違いでは？ については、まさしくその通りです！ ただ、現実的には、 tableで組まれている既存のソースを、 構造を変えずに見せ方を変える という作業中に発生した問題なので、tableで何とかなればな～という質問です。 やはり無理ですかね？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • XHTML 1.0 で height:auto; を使用した際について

    XHTML 1.0 で height:auto; を使用した際、IE、Firefox、Operaで動作が異なりますが、下記のようなHTMLは正しい記述ではないのでしょうか？ (1)テーブルの高さを固定で指定 (2)下段の高さを固定で指定 (3)上段の高さをautoで指定 この手順で表示をしますと、Firefox、Operaでは期待通り残りの高さが上段に利用されますが、IEでは高さの計算がおかしくなっています。 IEでもこのような操作を行う方法をご存知の方が見えましたら教えたいただきたいと思います。または、XHTMLの記述として正しくないなどの書き込みもお願いします。 --------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>無題のページ</title> </head> <body> <table cellpadding="0" cellspacing="0" border="0" style="width: 500px; height:200px;"> <tr style="height:auto;"> <td style="height: auto; width:5%; background-color:Fuchsia;"> left </td> <td style="height: auto; width:90%; background-color:Blue;"> center </td> <td style="height: auto; width:5%; background-color:Green;"> right </td> </tr> <tr style="height:auto;"> <td colspan="3" style="height:20px; background-color:red;"> bottom </td> </tr> </table> </body> </html> --------------------------------------------------------------- 以上、よろしくお願い致します。

    • 締切済み
    • CSS
  • div入れ子による height100%

    お世話になります。 親要素のdivは縦100%になるのですが、 入れ子のdivが縦100%にならず困っております。 検証ブラウザは、IE6、IE7、FF2、Safariです。 お分かりの方、ご教授をお願いいたします。 ▼HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>test</title> <style type="text/css"> <!-- html { height:100%; } body { height:100%; margin:0; padding:0; } #wrapper { background: #99CC00; width:500px; margin-left:auto; margin-right:auto; min-height:100%; } #wrapper-inner { background:#CCFF00; width:450px; margin-left:auto; margin-right:auto; min-height:100%; } #contents { background: #FFFFCC; width:400px; margin-left:auto; margin-right:auto; min-height:100%; } * html #wrapper { height: 100%; } * html #wrapper-left { height: 100%; } * html #wrapperA { height: 100%; } --> </style> </head> <body> <div id="wrapper"> <div id="wrapper-inner"> <div id="contents"> テスト <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> </div> </div> </body> </html>

    • ベストアンサー
    • CSS
  • liタグ中の二つのTABLEの間を埋めたい

    お世話になります。 現在二つのテーブルタグを埋めたくて、思考錯誤中です。 普通にTABLEタグを利用すると、二つのテーブルは隙間なく埋まります。 これをliタグに持っていくと、隙間が発生しております。 これを埋める方法はありませんでしょうか？ 何卒よろしくお願いします。 （ちなみに私の環境はIE6です。） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body style="background-color:Black;"> <div> <table> <tr> <td> <table style="background-color: Red;"> <tr> <td> a </td> </tr> </table> <table style="background-color: Red;"> <tr> <td> b </td> </tr> </table> </td> </tr> </table> </div> <ul> <li style="text-align: left; vertical-align: middle;"> <table style="background-color: Yellow;"> <tr> <td> a </td> </tr> </table> <table style="background-color: Yellow;"> <tr> <td> b </td> </tr> </table> </li> </ul> </body> </html>

    • ベストアンサー
    • HTML
  • 入れ子にしたテーブルをheight100%にする

    お世話になります。 以下のソースで、table2の高さを100％にしたいです。 この書き方では、firefoxではうまく表示できるのですが、 IEではだめでした。どこがいけないのでしょうか？？ ---------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- html {height:100%;} body {height:100%;} .th100 {height:100%;} --> </style> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" class="th100"> <tr> <td width="300" rowspan="2"> 長いテキスト </td> <td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td>table1</td> </tr> </table></td> </tr> <tr> <td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> <tr> <td>table2</td> </tr> </table></td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • css 標準モードでheight:100%にしたとき、フッターを画面の一番下にもってくるには？

    お世話になります。 タイトル通り、標準モードでheight:100%のものをつくり、一番下にフッターがくるようにしたいのですが、どうにも出来ません。 なにかいい方法がないか、ご教授いただけると幸いです。 尚、テーブルは使わない方法でお願いします。 以下が途中までのソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <style type="text/css"> <!-- html,body { margin:0px; padding:0px; height:100%; } div#h100 { height:100%; background-color:#eeeeee; } div#header { background-color:black; color:white; } div#container { background-color:#ffffee; } div#footer { background-color:black; color:white; } --> </style> </head> <body> <div id="h100"> <div id="header">ヘッダー</div> <div id="container">コンテンツ</div> <div id="footer">フッター</div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • DreamWeaverでテーブルをCSSにした場合にずれます。

    DreamWeaverを使い始めました。 CSSの段組左にテーブルを入れると下記のようになりました。 ----------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #wrap { width: 500px; } #content { float: left; width: 200px; background-color: #00CCCC; } #main { width: 300px; float: left; background-color: #99FF99; } #footer { clear: both; width: auto; background-color: #CCFF66; } --> </style> </head> <body> <div id="wrap"> <div id="content"> <table width="200px" border="0" cellspacing="0" cellpadding="0"> <tr> <td>1段</td> </tr> <tr> <td>2段</td> </tr> </table> </div> <div id="main">メインメインメインメインメイン</div> <div id="footer"> 下</div> </div> </body> </html> -----↑ここまでDreamWeaver そこで、CSSでテーブルにボーダー0の値を入れて、タグからborder="0"を消すと、段組右側が左の下にずれて表示されます。 ブラウザプレビューでは正常ですが、編集しにくくて困ってます。 table { border: none; border-collapse: collapse; } DWでは、このようになるものなのでしょうか。

    • ベストアンサー
    • HTML
  • tableのheight指定が効かない

    tableの高さを固定したく、heightとoverflowを指定したんですが、 tableに記述したソース分の大きさ（高さ）になり、スクロールバーが表示されません。 /*----外部CSS----*/ .sample{ color: #ffffff; background-color: #000000; height: 500px; width : 90%; overflow:scroll； } /*----ソース-----*/ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" type="text/css" hrefstyle.css"></head> <body> <table class="sample"><tbody><tr> <td class="a1"></td><td class="a0"></td><td class="a2"></td></tr><tr> <td class="a0"></td><td class="a0"> <div class="text">本文（heightが700pxくらいの内容）</div> </td><td class="a0"></td></tr><tr> <td class="a3"></td><td class="a0"></td><td class="a4"></td> </tr></tbody></table> 　　　　　　　　　　　　　　　　　　※tdのclassはテーブルのふちに用いてる画像を指定してあります。 </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
  • cssで表を中央寄せにできません。

    ｃｓｓでテーブルを中央に表示させたいのですが、うまくいきません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <style type="text/css"> <!-- table{ margin-left: auto; margin- right: auto ; background-image: url(2-3/1024sita.png); background-position: center; background-repeat:repeat-y; background-position: 50% 20%; } </style> </head> <body> <table border="0" width="1024"> <tr> <td><img src="2-3/1024by730.png" width="1024" height="730" border="0"></td> </tr> </table> </body> </html> どうしてですか？

  • 透過してしまうのですが・・・

    現在タグでメニューバーをつくっているのですが、 背景が透過されるテーブルタグを利用したところあとから設置した画像までもが透過されてしまいました。その場合はどこのタグを直せばいいのでしょうか？ ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>○○</title> <style type="text/css"> <!-- body { background-image: url(jfes_menupict.jpg); background-repeat: no-repeat; margin-left: 50px; margin-top: 20px; } --> </style></head> <body> <p>&nbsp;</p> <table style="filter:Alpha(opacity=50); background-color:#ffffff;"> <tr> <td width="281"><p align="center"> <img src="about.png" width="144" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="schedule.png" width="225" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="event.png" width="139" height="28" /></p> </td> </tr> <tr> <td><p align="center"><img src="blog.png" width="112" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="access.png" width="173" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="link.png" width="94" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="mail.png" width="96" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="toppage.png" width="200" height="27" /></p> </td> </tr> <tr> <td height="15">&nbsp;</td> </tr> </table> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する