tableがbodyにはみ出る。。
文章での質問で恐縮ですが、
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と同じ高さになるように、100%を指定しています。
分かりにくい質問で申し訳ないですが、
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>