コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

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

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

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

関連ラベル：
html
ソース：php.cn
前の記事：document.bodyの使い方 次の記事：Web の基本: html|css の使用
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
PX から REM への自動変換エラー <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...
から 2024-04-16 09:34:16
0
0
4687
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
文字列を HTML コード (配列から生成) に置き換えるトップレベルのメソッド 次のような文字列があるとします... $htmlPattern="Usernameis:#name#andusercompanyis#company#"; 部分...
から 2024-04-06 17:40:41
0
2
410
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート