tableがbodyにはみ出る。。

Question

文章での質問で恐縮ですが、

html例に記載のような形で、レイアウトを作っています。
ヘッダーとフッター、左右のBOXとベタな構成かと思ってますが、
右ボックス（div right-box）内のテーブルの行が増えた際（運用上、可変で増えます）に、
tableがdiv構成（wrap-1,wrap-2,right-box,footer）からはみ出して、bodyの領域に出てしまいます。

スタイルシートでは左右のボックスをfloat left、float rightしていて、
テーブルの行が可変なので、left-box以外にはheightは指定していないです。
※left-boxのheight指定は100%

heightを指定しなければ、基本的に行追加に合わせて、可変で動くような気がしているのですが、
どうもうまくいかないです。
left-boxにheightを指定しているのは、left-box内に定義している要素があり、
heightの指定がない場合に、その要素の高さになってしまうので、
right-boxと同じ高さになるように、１00%を指定しています。

分かりにくい質問で申し訳ないですが、
right-boxのheightをtableの行追加に合わせて可変にする方法はないでしょうか？

本来、heightなしで可変になるのであれば、
可変にならない原因の推測をお願いします。

---ここからhtml例---
<html>
<head>
</head>
<body>

<div id="wrap-1">

<div id="header">;
</div>

<div class="wrap-2">

<div id="left-box">
</div>

<div id="right-box">
<table id="table">
<tr>
<td><textarea></textarea></td>
</tr>
<tr>
<td><textarea></textarea></td>
</tr>
<tr>
<td><textarea></textarea></td>
</tr>
<tr>
<td><textarea></textarea></td>
</tr>
<tr>
<td><textarea></textarea></td>
</tr>
<tr>
<td><textarea></textarea></td>
</tr>
</table>
</div>

</div>

<div class="footer clear"> </body>
</div>

</div>

</body>
</html>

ORUKA1951 · Accepted Answer

floatを使わない。floatを使うと、その要素は他から独立してしまいます。そもそもHTMLおかしいし・・・ textareaがあるということは、formですか？table使う必要がありますか？ left-boxとかright-boxとか、端末によって下に回したりとかしたら名前と整合が取れなくなる。所詮、メインはtableですからその後に記述したので良い。　スタイルシートを利用できない端末や、検索エンジンにはこの情報はtableの後でよいはずです。floatを使うと文書の順番も変える必要が出てくる。 [サンプル]HTML4.01strict+CSS2.1 ★The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input ) ★W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) 　で検証済み!!のウェブ標準です。 ※タブは＿に置換してある。★必ず戻すこと★ 1) tableはstaticのままですから、それを含むsection(本文)はあわせて伸縮します。 2) 本文セクションのナビの高さはsectionの高さに合わせて伸縮します。　section{position:relative}　+ div.section div.nav{position:absolute;}なので 3) 将来navを上にしようが、左にしようが下にしようが・・自在にデザインできます。 4) 分かりやすいように背景は黄色にしてあります。 5) HTML5にするときは、そのままclass名を要素名に　→

　class名と使い道はHTML5に合わせてある。section,nav,footerも＿＿サンプル＿＿＿＿＿＿＿

＿＿

本文

＿＿

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

お名前
メッセージ
メッセージ
メッセージ

＿＿

＿＿＿

その他の情報

＿＿

＿

tableがbodyにはみ出る。。

floatを使わない。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング