<div>をCSSで特定のパーセンテージの高さに設定しようとしていますが、内部のコンテンツと同じサイズのままです。しかし、HTML5 <!DOCTYTPE html>を削除すると、それは動作し、<div>は必要に応じてページ全体を占有します。私はページを検証したいので、どうすればいいですか？高さの割合HTML 5/CSS
私はpageのIDを持っている、<div>にこのCSSを持っている：
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
私はCSSで一定割合の高さにdiv要素を設定しようとしています
割合？
高さのパーセンテージを設定するには、親要素（*）の高さを明示的に指定する必要があります。高さをautoとしておくと、ブロックのコンテンツの高さになります...しかし、コンテンツ自体の高さが親のパーセンテージで表されている場合は、 little Catch 22.ブラウザはあきらめてコンテンツの高さだけを使用します。
したがって、divの親は明示的にheightプロパティを持っている必要があります。必要に応じてその高さもパーセンテージにすることができますが、問題を次のレベルにまで上げるだけです。
あなたは、ビューポートの高さの割合、<html>と<body>を含むdiv要素のすべての祖先、divの高さを作りたい場合は
height: 100%を持っている必要がありますので、明示的な割合の高さのチェーンは、div要素まであります。
（*：も配置する最も近い祖先であるか、div要素が配置されている場合は、「を含むブロック」、。）
また、すべての近代的なブラウザとIE> = 9のサポート新しいCSSユニットビューポートの高さ（vh）とビューポートの幅（vw）に対する相対：
div {
height:100vh;
}
はmore infoについてはこちらを参照してください。
肖像画の向きでは動作しません。http://stackoverflow.com/questions/23198237/percentage-of-height-not-working-for-portrait-screen-orientation – Dchris
以下のBrian Campbellの回答をご覧ください。正しい解決策。この回答は回避策と思われ、実際の問題に対処していません。 –
あなたにも<html>と<body>要素に高さを設定する必要があります。さもなければ、それらは内容に合うだけの大きさになるでしょう。 For example：何の
<!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>¬_¬文書の高さを100％に設定する必要があることを理解するまでに20分かかりました。私はこれを少し遅く読んだが、それはまだ非常に輝いている。 *一口* – omninonsense
これは答えとして投票しなければなりません。多くの人が最初に答えを見て、それが不可能だと思って、これを読まずに他の方法が存在するかどうかを考えるのをやめています。 –
これは正解であると私は同意します。身長とhtmlの親要素が設定されている必要があるため、高さは機能しません。この回答は受け入れられる回答でなければなりません。 –
bobinceの答えでは、「高さ：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
素晴らしい感謝！ – zaw
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>
は、パーセント値でCSS 'height'財産のシンプルかつ明確な説明です：http://stackoverflow.com/a/31728799/3597276 –
はDOCTYPEの問題に対処しますhttp://stackoverflow.com/ a/32215263/3597276 –