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;
}
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

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 heighthtml {height:100%}に追加する必要があります

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

body {height:100vh}

vhviewport heightを表します

役立つと思う

1
Md. A. Barik

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

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

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

最小高さ:calc(100vh-246px);

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

1
Jahmic