プロが教える店舗&オフィスのセキュリティ対策術

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-transitio …


<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>

A 回答 (3件)

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;}
でよい。
    • good
    • 0
この回答へのお礼

回答ありがとうございます。

まあ、変な書き方をするよりも、
教えてくださったように、シンプルで正しい書き方をするのが、
サイトのサイズ的にもSEO的にも色々な面で良いですよね。

IEではうまくいかないことが多いですが、そこら辺は柔軟に対応してゆきたいと思います。

お礼日時:2011/06/29 18:07

>IEではうまくいかないことが多いですが、そこら辺は柔軟に対応してゆきたいと思います。


 いまやIE6は、3.64%
日本のバージョン別ブラウザシェアグラフ (StatCounter Global Statsより) ( http://lhsp.s206.xrea.com/misc/browser-share-ver … )
無視せざるを得ないシェアまで落ち込んでいるとよいかと
「IE6以前のブラウザは表示が崩れるばかりかセキュリティ上も問題があるので、他の新しいブラウザをご利用ください」とメッセージを入れている。

 IE7以降なら、DOCTYPE スイッチで標準モードで動作するようにしています。

 先のサンプルもIE7以降では問題ないはずです。IE6も考慮すれば内容的に(強制的に)div.section div.sectionを大きくしておけばよいでしょう。
 floatを使う方法もありますが、floatは本文中で使うために使いたくないですね。
    • good
    • 0
この回答へのお礼

回答ありがとうございます。

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

お礼日時:2011/07/04 10:09

仕様書には


【引用】____________ここから
'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 … )]より

また、%の場合、ブロック要素は親ブロックの内寸を100として計算しますから、ちょっとへん。
 そもそも、一行しかないTABLEでセルの高さを(何を基準にするか不明ですが)100%にするという必然性がわかりません。スタイルシートを期待通りに働かせるために、HTML自体が正しくなきゃなりません。
【引用】____________ここから
メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_ … )]より

 TABLEでマークアップすることがそもそもの間違いでは?
【引用】____________ここから
ページレイアウトの目的で表を用いる。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より


<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;}

だけでよいような・・

この回答への補足

>TABLEでマークアップすることがそもそもの間違いでは?

については、まさしくその通りです!

ただ、現実的には、
tableで組まれている既存のソースを、
構造を変えずに見せ方を変える
という作業中に発生した問題なので、tableで何とかなればな~という質問です。

やはり無理ですかね?

補足日時:2011/06/29 13:54
    • good
    • 0
この回答へのお礼

回答ありがとうございます。

うまく質問出来ていなかったかもしれません。すみません。

>そもそも、一行しかない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を自動にしたいということです。

お礼日時:2011/06/29 13:45

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!