• 締切済み

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
  • 回答数2
  • ありがとう数5

みんなの回答

  • abril
  • ベストアンサー率69% (388/560)
回答No.2

ANo.1です。ANo.1にてtableのwidthとheightの値を取り違えて計算しておりましたので訂正しておきます（1行目のセルの高さは200px - 20px = 180px）。 ※ちなみに、heightプロパティの初期値は元々autoですので、現状のソースから"height: auto;"を指定している部分を全て削除しても結果は全く変わりません。 > 下段を固定している高さは、場面(プログラム)によって異なるため残りの高さはブラウザで判断してほしいと思ったのですが...。HTML4.0では一般的な使われ方かと思うのですが。 「HTML4.0では一般的な使われ方」かどうかは存じませんし、ANo.1にも書きました理由で基本的にtableで行毎の高さを固定したりしないので…ただ「残りの高さはブラウザで判断」している状態が現在の結果です。ブラウザの判断は一律ではないので。 > IEでは高さの計算がおかしくなっています。 検証してみました。コピペされたソースをそのまま再現してみると、Firefox・Opera・Safariでは質問者様が期待されているであろう結果になり、IE6/7では質問者様の期待に反して1行目の高さが2行目の高さを差し引いた高さ180pxになってくれず、2行目も20pxより高さのある状態で配分されています。 IE6では、文書の先頭にxml宣言を挿入しDOCTYPEスイッチが切り替わることでお望みの結果が得られる様です。ですが、IE7では変化ありません。 しかしIE6/7ではこれがtd要素に対する"height: auto;"の解釈の実装なので、どうしようもないかと思います。 table要素のheightプロパティは言ってみればmin-heightと同じで、内包するデータ量が相対的に少なくても最低限その高さは確保するというものであり、実際のデータ量が設定したheightを超えてしまったとしてもdivなどのボックスモデルの場合の様にはみ出したりせずデータ量に応じて自動的に伸びて行く仕様ですので、「その高さで固定する」というものでは元々ないです。そこはよく把握されておいた方がよろしいかと存じます。 なので、もしIE6/7を含む質問者様の想定した各環境での結果をCSSにって全て同じになる様にするには、2行目のheightの値を引き算した固定値を常に1行目のセルの高さとして指定してしてやるぐらいしかない様に思われます。つまり、2行目が30pxだったら1行目には"height: 170px;"を、2行目が40pxだったら1行目には"height: 160px;"を…という様に。 もしかしったらJavaScriptで常に1行目と2行目のセルの高さを取得して比較し、table全体の高さから2行目の値を引いた値を1行目に返して高さを揃える、とかいう指定ができるかもしれませんが、カテ違いですしJavaScriptマスターではないので明言は避けます。

harada_fs
質問者

お礼

abril さんへ 確認までしていただいたようでありがとうございました。 今回の件は、HTML4.0として開発を行ったホームページをXHTMLへ移植する際に必要な項目だったのですが、当方でも色々と確認したのですが、やはり、height:auto;には当方が期待する機能は備わっていないものとして進める必要がありますね。ここで一旦、調査を終了したいと思います。 まぁ、気持ちとしては、この点においてはXHTMLの方が機能的に劣っているとも思ってしまいます。 また、JavaScriptにてというご意見も頂きましたが、見かけ上の操作をJavaScriptに頼るのもどうかと思いましたので見送りたいと思います。 以上、ありがとうございました。

  • abril
  • ベストアンサー率69% (388/560)
回答No.1

最初にお断りしておきますが、以下は現状のお悩みを解決する為の直接的「回答」ではありませんので興味なければ読み飛ばして下さって結構です。 サンプルの様に2行（trが2つ）しかないtableにおいて、「(1)テーブルの高さを固定で指定（500px）」し、「(2)下段の高さを固定で指定（20px）」したら、「(3)上段の高さ」は「auto（成り行き）」ではなく、(1)500px - (2）20px = 480pxという固定値が相応しい事になりますので、そもそもautoを指定している意味がよくわかりません。また、(2)においてtrに対しては"height: auto;"としているにも関わらずその子要素のtdを"height: 20px;"と指定しているのも矛盾しています（同一の行の中のセルの高さは皆同じにしかならないので、tdの集合であるtrの高さ＝tdの高さです）。 また、がちがちに各行の高さを指定したとしても、セルの高さは内包する要素（セル内のテキストなり画像なり）に応じて自動的に伸びてしまいますので、あまり意味がありません。 > XHTMLの記述として正しくないなどの書き込みもお願いします。 単に文法的に正しいか正しくないかはチェッカーにかければ判明する事ですので言及しませんが、このサンプルの表のスタイルを見る限り、表を「レイアウト」の意図で使用されておられませんか？レイアウトでなけければわざわざセルの高さを固定しなければならない理由は考えにくい（表の内容に応じて可変なのが当たり前なので）ですし。もしこのtableの内容が表に相応しいものではないのであれば、(X)HTMLのマークアップという意味では「正しい（適切な）」用法から逸脱しているという事は言えます。

harada_fs
質問者

補足

書込みありがとうございます。 ソース本文の<tr>の部分に height を指定してしまっているのは誤記でした。何度がテストしているうちに両方記入してしまったものを書き込んでしまったようです。ご迷惑をおかけしました。 ●意図といたしましては下記のような理由となります。 -------------------------------------- 下段を固定している高さは、場面(プログラム)によって異なるため残りの高さはブラウザで判断してほしいと思ったのですが...。HTML4.0では一般的な使われ方かと思うのですが。 -------------------------------------- 下段の高さが結果としてheight:20px;をオーバーした場合(例えば30px)、上段を残りの高さ(470px)としたいと考えています。 -------------------------------------- 上記いづれも、Firefox、Operaでは期待通りの結果が表示されるのですが..。

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

関連するQ&A

  • 標準モードでの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
  • 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
  • Firefoxでheight:100%がきかない？

    ソースは以下のとおりです。 IEでは#container内のDIV要素は全てheight:100%で表示されるのですが、Firefoxでは、高さ：100％がききません。 Firefoxでもページの下まで表示されるようにしたいと思います。 よろしくお願いいたします。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>サンプル</title> <style type="text/css"> <!-- /*全体の設定*/ * { margin: 0px; padding: 0px; font-size: 12px; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight: normal; line-height: 150%; color: #000; } /*ページ全体の設定*/ html,body { height:100%; } body { background-color: #FFF; } /*カラムの設定・IE6のハック*/ #wrapper { width: 1000px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FF0000; } body > #wrapper { height:auto; } /*ヘッダの設定*/ #header { width: 1000px; height: 123px; clear: both; } /*メインコンテンツの設定*/ #container { width: 1000px; clear: both; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#00FF00; } /*左カラム外側（2カラム内包）*/ #container_left01 { width: 732px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム（左側）*/ #container_left02 { width: 268px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム（右側）*/ #container_left03 { width: 463px; float: right; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height: 100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FFFF00; } /*右カラム*/ #container_right01 { width: 267px; float:left; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } --> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>あああ</h1> </div> <div id="container"> <div id="container_left01"> <div id="container_left02">あああ</div> <div id="container_left03">あああ</div> </div> <div id="container_right01">あああ</div> </div> </div> </body> </html>

  • xhtml+cssのfloatの使い方、センタリングの方法

    xhtml+cssでのプログラミングについて教えてください！ 初めてxhtml+cssでのプログラミングに挑戦しています。 質問したい内容が２つあります。 1.) ページ全体をセンタリング表示したいです。 　　(下記ソースのままだと左寄せに表示されてしまいます。) 2.) floatして右側に表示しているボックスの中に 　　さらにfloatさせてleft、lightの２つ横並びのボックスを 　　配置することは可能でしょうか？ 　　また、その際の注意点などはございますでしょうか？ --------------------------------------------------------------- <?xml version="1.0" encoding="Shift_JIS"?> <!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> </head> <style type="text/css"> <!-- body{ margin: 0px; padding: 0px; background-color:#74CAEB; } #wrap { width: 800px; margin-right: auto; margin-left: auto; } #header { width: 800px; height: 80px; background-color:#E1F3FB; } #side { float: left; width: 200px; height: 200px; background-color:#14729A; } #main { float: right; width: 600px; background-color:#ffffff; } #main .conte1 { margin-top: 20px; width: 600px; height: 100px; background-color:#EFEFEF; } #main .conte2 { float: left; margin-top: 20px; width: 290px; height: 100px; background-color:#EFEFEF; } #main .conte3 { float: right; margin: 20px 0px 0px 20px; width: 290px; height: 100px; background-color:#EFEFEF; } #footer { clear: both; width: 800px; height: 80px; background-color:#E1F3FB; } --> </style> <body> <div id="wrap"> <div id="header"> </div> <div id="side"> </div> <div id="main"> <div class="conte1"> </div> <div class="conte2"> </div> <div class="conte3"> </div> </div> <div id="footer"> </div> </div> </body> </html> --------------------------------------------------------------- 質問のどちらかでも結構です。 初心者のため質問の仕方が悪く、ご理解が難しいかもしれませんが どなたかご理解頂ける方は教えてください。

  • CSSの質問です。

    親子枠の関係です。 親を縦横300px x 300pxと指定した場合、子に縦横300px x 300pxと指定すると親枠からはみ出るんでしょうか？ <!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"> <!-- #oya { background-color: #006666; height: 300px; width: 300px; } #kodomo { background-color: #006699; height: 300px; width: 300px; } --> </style> </head> <body> <div id="oya"> <div id="kodomo"> </div> </div> </body> </html> 経験者若しくはプロの方のアドバイスを願います。

    • ベストアンサー
    • 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>

  • DTDとXHTMLについて

    ドキュタイプを<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> にし、divでイメージを積み上げるとIE6.1（6.2は平気のようで・・・）でイメージとイメージの間に隙間が開いてしまうのですが、 <div><img src="aaa.gif" width="200" height="10" alt="aaa" title="aaa" border="0" /></div> <div><img src="bbb.gif" width="200" height="10" alt="bbb" title="bbb" border="0" /></div> こんな感じでかくと・・・。 これを回避する方法がわかる方いらっしゃいましたら教えてください。　CSSでdivにline-height:0px;を指定すれば崩れなくなるのですが、これだと他で不都合があるので使えません・・・。　なんだか上記のドキュタイプをいれると他にもIE6.1だけのバグがあるようなきがするのですが、詳しい方いらっしゃいましたら教えてください・・　よろしくお願いします。

  • 入れ子にしたテーブルを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
  • 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
  • スタイルシートでのデザイン

    HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する