Info

先週foxusの管理者に頼んでMTアカウントを作ってもらい、Blogを作成しました。(これで4つ目、一つは死んでしまったけど)
MTのデフォルトテーマがダサイので自分でカスタマイズしようといろいろ弄って今の形になりました、が、今日、リリースされたばかりのFirefox2で見てみるとレイアウトが崩れてしまった。

原因はスタイルシートで指定した「height:750px;」。IEではdiv中で書いた内容の高さが指定した高さを超えた場合、自動的に伸ばしてくれ る(CSS正しい使用ではないが)がFirefoxは絶対高さだけでした。「height:auto;」にすることも可能だが、HelloWorldのよ うな短い文章を開くと下半分が背景の色になってしまうし。

仕様によれば、height:x% は親要素に左右されるようです。親要素で明示的に100pxに指定した場合、子要素で50% にすると50px になります。親要素で明示的に指定してなかった場合、つまりautoの場合は子要素でx% と指定してもautoと認識されて結果的には内容の高さになって、ブラウザのx%にはなりません。目的に達するにためには親要素から順に100%指定して 指定行く必要があります。

サンプル

<html><head>
<style type="text/css">
div.aaa{
    height: 100%; /* auto か x% */
    border: blue solid  1px;
}
div.bbb{
    height: 50%;
    border: red dashed 1px;
}
</style></head>
<body>
    <div class="aaa">
        親要素
        <div class="bbb">子要素</div>
    </div>
</body>

</html>

Comments

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Basic HTML is allowed. Your email address will not be published.

Subscribe to this comment feed via RSS