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>
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;}
でよい。
回答ありがとうございます。
まあ、変な書き方をするよりも、
教えてくださったように、シンプルで正しい書き方をするのが、
サイトのサイズ的にもSEO的にも色々な面で良いですよね。
IEではうまくいかないことが多いですが、そこら辺は柔軟に対応してゆきたいと思います。
No.3
- 回答日時:
>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は本文中で使うために使いたくないですね。
回答ありがとうございます。
IE6は早く無くなってほしいですね。
floatも、高さを揃えるためにはJavaScriptを使わないと解決できないようなので、便利そうでなかなかやっかいだと思います。
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 … )]より
また、%の場合、ブロック要素は親ブロックの内寸を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で何とかなればな~という質問です。
やはり無理ですかね?
回答ありがとうございます。
うまく質問出来ていなかったかもしれません。すみません。
>そもそも、一行しかない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を自動にしたいということです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
div要素が重なってします
-
htmlのolやulなどlistにtitleや...
-
<div id="container">の使いか...
-
HTML属性での「""」 「''」違い
-
1時間30分を簡単に表したいで...
-
article、section、hgroup?
-
inline-blockをネストすると表...
-
CSSで、contentsがfooterに重な...
-
HTMLの文法がめちゃくちゃらし...
-
ヘッダーを左右に二分割する方...
-
開閉式の隠し要素が一瞬表示さ...
-
divとpの使いわけ
-
html divボックスの入れ子で中...
-
divの中に外部のHTMLを埋め込む
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
hタグを使わずに小見出し
-
インラインフレームのページ内...
-
<!-- #BeginLibraryItemとは
-
divの入れ子枠の中に収めたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
複数のボタンを等間隔に、かつ...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
html の divとtable の役割
-
<div id="container">の使いか...
-
divとpの使いわけ
-
HTML5 iframe の代わり
-
ヘッダーとフッターだけ背景を...
-
3カラムレイアウトで「常に残り...
-
min-heightとheightの違いについて
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
-
グリッドレイアウトで"auto-fit...
-
divの中に外部のHTMLを埋め込む
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
iframeを使わずに上下50%ずつに...
-
html5でheaderの中にnav
-
hタグの右横に画像を表示
おすすめ情報