- ベストアンサー
標準モードでのheight:100%,autoについて
- 標準モードでのheight:100%,autoについての解説と、テーブルの高さを自動にする方法について説明します。
- 標準モードでは、bodyがauto、親要素がautoのとき、子要素のheightを100%に設定しても、それはautoと解釈される制約があります。
- テーブルの高さを自動にすることはできないため、他の方法を検討する必要があります。
- charlie432
- お礼率100% (53/53)
- CSS
- 回答数3
- ありがとう数4
- みんなの回答 （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;} でよい。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞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は本文中で使うために使いたくないですね。
お礼
回答ありがとうございます。 IE6は早く無くなってほしいですね。 floatも、高さを揃えるためにはJavaScriptを使わないと解決できないようなので、便利そうでなかなかやっかいだと思います。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
仕様書には 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから '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;} だけでよいような・・
お礼
回答ありがとうございます。 うまく質問出来ていなかったかもしれません。すみません。 ＞そもそも、一行しかない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を自動にしたいということです。
補足
＞TABLEでマークアップすることがそもそもの間違いでは？ については、まさしくその通りです！ ただ、現実的には、 tableで組まれている既存のソースを、 構造を変えずに見せ方を変える という作業中に発生した問題なので、tableで何とかなればな～という質問です。 やはり無理ですかね？
お礼
回答ありがとうございます。 まあ、変な書き方をするよりも、 教えてくださったように、シンプルで正しい書き方をするのが、 サイトのサイズ的にもSEO的にも色々な面で良いですよね。 IEではうまくいかないことが多いですが、そこら辺は柔軟に対応してゆきたいと思います。