締切済み

floatを突き抜けて背景の色が無くなる

2011/04/08 10:04

Firefox等ではタイトルの高さ分だけコンテナを突き抜けてしまうようです。どうすればよいのでしょうか？タイトルがあるのと、表は画面いっぱいにしたい(高さ100%)という意図があり中々うまくいきません。是非アドバイス宜しくお願い致します。 <html> <head> <style type="text/css"> html, body{ height: 100%; } #container { height: 100%; color: #000000; background-color: #cccccc; border: 1px solid #333333; } #container:after { content: ""; display: block; clear: both; height: 1px; overflow: hidden; } #title { width: 100%; height: 70px; float: left; border: 1px solid #000000; } .leftBox { width: 20%; float: left; border: 1px solid #000000; } .rightBox { width: 75%; height: 100%; float: right; border: 1px solid #000000; } </style> </head> <body> <div id="container"> <div id="title">タイトル</div> <div class="leftBox"> ナビ<br> a<br> b<br> c<br> d<br> e<br> f<br> g<br> h<br> i<br> j<br> k<br> l<br> m<br> n<br> o<br> p<br> q<br> r<br> s<br> t<br> u<br> v<br> w<br> x<br> y<br> z<br> </div> <div class="rightBox"> <table height="100%" width="100%" border="1"> <tr> <td>表1</td> <td>表2</td> </tr> <tr> <td>表3</td> <td>表4</td> </tr> </table> </div> </div> </body> </html>