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>

このQ&Aに関連する最新のQ&A

A 回答 (2件)

</div>


<hr>
</div>
</body>
</html>

CSS
div.rightBox hr{visibility:hidden;}
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
試してみましたがFFでは効きませんでした。。

お礼日時:2011/05/07 07:41

いわゆるclearfixはfloatを指定した要素に対して使用して下さい。



clearfixが何のことかわからなければ。
clear:bothは、floatを指定した要素をクリアするための物ですから、適用させるものを調整してみてください。

この回答への補足

ご回答ありがとうございます。
しかしながらclearfixはすでに記入しています。Height100%の問題のようなのですが解決策がまだ見つかっていません。。

補足日時:2011/04/10 18:52
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング

おすすめ情報