宣言時の div 高さ 100% の問題の解決策-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

宣言時の div 高さ 100% の問題の解決策

高洛峰

Mar 23, 2017 am 09:08 AM

html

HTMLコードを使用してWebページを作成する場合、が宣言されており、コード内のdivの高さが100%に設定されている場合、表示が異常になる場合があります。たとえば、次のコード:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {margin:0px;padding:0px;}
            div {
                background-color:red;
                width:200px;
                height:100%;
                }
    </style>
</head>
<body>
            <div></div>
</body>
</html>

ログイン後にコピー

表示される結果は次のとおりです: nothing! Why?

その理由は、HTML5 標準では、高さまたは幅がパーセンテージに設定されている場合、親タグを参照する必要があるためです。この文を理解できれば、問題はもっと簡単に解けるでしょう。

タグの親タグはであるため、タグの高さは定義する必要がありません。

が表示されることが定義されていません。 CSS にパラメーター body {height:100%;} を追加してプレビューすると、結果は次のようになります。まだ何もありません!

なぜですか? タグの高さは 100% に設定されていますが、タグはタグの高さも定義する必要があります。したがって、追加する最終パラメータは html, body {height:100%;} です

html と body の間にはスペースではなくカンマがあることに注意してください。これはマルチラベルセレクターであり、派生セレクターではないことを説明します。

以上が宣言時の div 高さ 100% の問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。