CSS の高さのパーセンテージ設定が有効にならない場合はどうすればよいですか?

有効にならない理由: 親要素の高さが決まっていないため、「height:XX%」スタイルが有効に使えません。解決策: height 属性を使用して親要素に特定の高さを設定し、子要素の高さ設定パーセンテージが有効になるようにします。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

height:50% を div に設定するなど、ブロック レベルの要素にレスポンシブな高さを設定すると、効果が確認できないことがよくあります。

理由は、パーセンテージ サイズがその親要素の幅と高さに相対的なためです。たとえば、最も外側の要素で設定されたパーセンテージは画面に対応します。

理解する必要があるのは、幅については、その親要素が幅を決定せずにパーセンテージを設定できるということです

しかし、高さは異なります。高さを決定しない場合、高さ:XX% スタイルは効果的に使用できません。 ！ ！

上の段落を読んだ後、body{heigh: 100%} を追加しようとしましたが、うまくいきませんでした...

よく考えてみましょう~~ ~ , bodyの親要素の高さは決まっていますか？ ? ? ? ? ?いいえ~~それでも効果はありません。

したがって、HTML 要素の高さを設定する必要があります。 ！または、*{}で高さのパーセンテージを設定します。

コードは次のとおりです。

*{
	margin:0px;
	padding: 0px;
}
html,body{
	margin: 0px;
	background:url(../img/body_bg.jpg) no-repeat 0 0;
	width:100%;
	height:100%;
}
.nav{
	width:100%;
	height:20%;
	border: 1px solid red;
}
.nav>img{
	width:100%;
	height: 100%;
}

プログラミング関連の知識の詳細については、

プログラミング ビデオをご覧ください。 ！

以上がCSS の高さのパーセンテージ設定が有効にならない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。