<div>CSSで高さを特定のパーセンテージに設定しようとしていますが、その中のコンテンツと同じサイズのままです。<!DOCTYTPE html>ただし、HTML 5を削除すると機能し、<div>必要に応じてページ全体が使用されます。ページを検証したいのですが、どうすればよいですか？
このCSSは<div>にあり、IDはpage次のとおりです。
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}回答:
CSSでdivを特定のパーセントの高さに設定しようとしています
何パーセント？
高さのパーセンテージを設定するには、その親要素（*）に明示的な高さが必要です。高さをそのままにしておくと、これはかなり自明です。autoと、ブロックはそのコンテンツの高さになります...しかし、コンテンツ自体が親のパーセンテージで表される高さを持っている場合は、少し作りましたキャッチ22.ブラウザーはあきらめ、コンテンツの高さだけを使用します。
したがって、divの親には明示的なheightプロパティが必要です。その高さは必要に応じてパーセンテージにすることもできますが、問題は次のレベルに移動します。
divの高さをビューポートの高さのパーセンテージにしたい場合は、<html>and を含むdivのすべての祖先<body>がを持っている必要がheight: 100%あるため、divまでの明示的なパーセンテージの高さのチェーンがあります。
（*：または、divが配置されている場合は、「包含ブロック」、これも配置される最も近い祖先です。）
または、すべての最新のブラウザーとIE> = 9は、ビューポートの高さ（vh）とビューポートの幅（vw）に関連する新しいCSSユニットをサポートしています。
div {
height:100vh;
}詳細はこちらをご覧ください。
<html>および<body>要素にも高さを設定する必要があります。それ以外の場合は、コンテンツに合わせて十分な大きさになります。たとえば、次のとおりです。
<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>ボビンスの答えは、「高さ：XX％;」の場合を知らせます。動作するか動作しません。
一定の比率（高さ：独自の幅の％）で要素を作成する場合は、を使用して高さを効果的に設定するのが最善の方法padding-bottomです。正方形の例：
<div class="square-container">
<div class="square-content">
<!-- put your content in here -->
</div>
</div>
.square-container { /* any display: block; element */
position: relative;
height: 0;
padding-bottom: 100%; /* of parent width */
}
.square-content {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}四角いコンテナはパディングで作られ、コンテンツはコンテナを埋めるために拡大されます。このテーマに関する2009年の長い記事：http : //alistapart.com/article/creating-intrinsic-ratios-for-video
使用できます100vw / 100vh。CSS3はビューポート関連のユニットを提供します。100vwは、ビューポートの幅の100％を意味します。100vh; 高さの100％。
<div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
<div style="width:70%; height: 100%; border: 2px dashed red"></div>
<div style="width:30%; height: 100%; border: 2px dashed red"></div>
</div>こんにちは！パーセンテージ（％）を使用するには、その親要素の％を定義する必要があります。body {height：100％}を使用する場合、親には高さのパーセンテージがないため機能しません。その場合、その身長を機能させるには、これをhtml {height：100％}に追加する必要があります
他のケースでは、定義できる親のパーセンテージを取り除くために使用できます
body {height：100vh}
vhはビューポートの高さを表します
それは役立つと思います
コンテンツ全体が画面の高さより低い場合など、条件付きでdivの高さを設定したい場合があります。すべての親要素を100％に設定すると、画面サイズよりも長い場合にコンテンツが切り捨てられます。
したがって、これを回避する方法は、min-heightを設定することです。
親要素が自動的に高さを調整できるようにします。次に、メインのdivで、ヘッダーとフッターのdivのピクセルサイズを100vh（ビューポート単位）から差し引きます。CSSでは、次のようなもの：
最小の高さ：calc（100vh-246px）;
100vhは、画面の全長から周囲のdivを引いたものです。高さではなく最小高さを設定することにより、画面より長いコンテンツは途切れずに流れ続けます。
heightパーセント値を持つプロパティ：stackoverflow.com/a/31728799/3597276