web-dev-qa-db-ja.com

高さの割合HTML 5 / CSS

CSSで<div>を特定のパーセンテージの高さに設定しようとしていますが、その中のコンテンツと同じサイズのままです。ただし、HTML 5 <!DOCTYTPE html>を削除すると機能します。<div>はページ全体を必要に応じて占有します。ページを検証したいので、どうすればよいですか？

IDがpageである<div>にこのCSSがあります：

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}
htmlcssheight
150
D. Strout

CSSでdivを特定のパーセンテージの高さに設定しようとしています

何パーセント？

高さのパーセンテージを設定するには、その親要素（*）に明示的な高さが必要です。これはかなり自明です。高さをautoのままにすると、ブロックはそのコンテンツの高さを取得しますが、コンテンツ自体の高さが親のパーセンテージで表される場合、 little Catch 22.ブラウザはあきらめ、コンテンツの高さを使用します。

したがって、divの親には明示的なheightプロパティが必要です。必要に応じてその高さもパーセンテージにすることができますが、それは問題を次のレベルに移動するだけです。

Divの高さをビューポートの高さのパーセンテージにしたい場合、<html>や<body>を含むdivのすべての祖先はheight: 100%を持たなければならないので、divまでの明示的なパーセンテージの高さのチェーンがあります。

（*：または、divが配置されている場合、「包含ブロック」。これも配置される最も近い先祖です。）

または、すべての最新のブラウザおよびIE> = 9は、ビューポートの高さ（vh）およびビューポートの幅（vw）に関連する新しいCSSユニットをサポートします。

div {
    height:100vh; 
}

詳細 についてはこちらをご覧ください。

342
bobince

<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>
65
Brian Campbell

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

14
Olex Ponomarenko

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>
4
Ahmad Aghazadeh

こんにちは！ percentage（％）を使用するには、その親要素の％を定義する必要があります。 body {height：100％}を使用すると、親に高さの割合がないため機能しません。その場合、それを機能させるためにbody heightをhtml {height：100％}に追加する必要があります

他の場合は、定義する親の割合を取り除くために使用できます

body {height：100vh}

vhはviewport heightを表します

役立つと思う

1
Md. A. Barik

コンテンツ全体が画面の高さよりも小さい場合など、divの高さを条件付きで設定したい場合があります。すべての親要素を100％に設定すると、画面サイズよりも長いコンテンツが切り捨てられます。

したがって、これを回避する方法は、最小高さを設定することです。

親要素の高さを自動的に調整し続けます。メインdivで、ヘッダーとフッターのdivのピクセルサイズを100vh（ビューポート単位）から減算します。 cssでは、次のようなものです：

最小高さ：calc（100vh-246px）;

100vhは、画面の全長から周囲のdivを引いたものです。高さではなくmin-heightを設定すると、画面よりも長いコンテンツが途切れずに流れ続けます。

1
Jahmic