ホームページ > ウェブフロントエンド > htmlチュートリアル > 宣言時の div 高さ 100% の問題の解決策

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

高洛峰
リリース: 2017-03-23 09:08:14
オリジナル
2592 人が閲覧しました

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート