web-dev-qa-db-ja.com

CSS - 高さのパーセンテージが機能しないのはなぜですか？

どのようにしてheightのパーセント値が機能しないのに、widthのパーセント値が機能しないのでしょうか。

例 ：

<div id="working"></div>
<div id="not-working"></div>

#working{
    width:80%;
    height:140px;
    background:orange;
}
#not-working{
    width:80%;
    height:30%;
    background:green;
}

#workingの幅はビューポートの80％になりますが、#not-workingの高さは0になります。

cssheightwidth
214
Web_Designer

ブロック要素の高さは、デフォルトでブロックのコンテンツの高さになります。だから、このようなものを考える：

<div id="outer">
    <div id="inner">
        <p>Where is pancakes house?</p>
    </div>
</div>

#innerは段落を含むのに十分な高さに成長し、#outerは#innerを含むのに十分な高さに成長するでしょう。

高さまたは幅をパーセントで指定すると、それは要素の親に対するパーセントです。 widthの場合、他に指定されていない限り、すべてのブロック要素は<html>まで戻り、その親と同じ幅になります。そのため、ブロック要素の幅はその内容とは無関係であり、width: 50%を指定すると、明確に定義されたピクセル数が得られます。

ただし、ブロック要素の高さその内容によって異なります特定の高さを指定しない限り。したがって、親要素と子要素の間には高さが関係しているというフィードバックがあり、親要素に特定の高さを与えてフィードバックループを解除しない限り、height: 50%は明確に定義された値にはなりません。

320
mu is too short

heightプロパティのパーセンテージ値は少し複雑で、widthプロパティとheightプロパティは実際には異なる動作をします。 スペックを通してツアーに参加してみましょう。

heightプロパティ：

CSS Snapshot 2010仕様のheightについての説明 を見てみましょう：

パーセンテージは、生成されたボックスの 包含ブロック の高さを基準にして計算されます。包含ブロックの高さが明示的に指定されていない（つまり、コンテンツの高さに依存する）場合、この要素が絶対的に配置されていない場合、値は 'auto'に計算されます。ルート要素の高さのパーセンテージは、 初期包含ブロック を基準にしています。注：包含ブロックがブロックレベル要素に基づく絶対配置要素の場合、パーセンテージはその要素のパディングボックスの高さを基準にして計算されます。

それでは、それを少しずつ見ていきましょう。

パーセンテージは、生成されたボックスの 包含ブロック の高さを基準にして計算されます。

ブロックを含む とは何ですか？少し複雑ですが、デフォルトのstaticの位置にある通常の要素の場合、次のようになります。

最も近いブロックコンテナの先祖ボックス

または英語では、その親ボックス。 （fixedとabsoluteの位置についても同様です。ただし、この回答を短くするために無視しています。）

それで、これら二つの例を見てください：

<div   id="a"  style="width: 100px; height: 200px; background-color: orange">
  <div id="aa" style="width: 100px; height: 50%;   background-color: blue"></div>
</div>
<div   id="b"  style="width: 100px;              background-color: orange">
  <div id="bb" style="width: 100px; height: 50%; background-color: blue"></div>
</div>

この例では、#aaの包含ブロックは#aです。#bおよび#bbについても同様です。ここまでは順調ですね。

heightの仕様書の次の文は、この答えの序文で述べた複雑さです。

包含ブロックの高さが明示的に指定されていない、つまりこの要素が絶対位置にない場合、値は 'auto'に計算されます。

ああ！包含ブロックの高さが明示的に指定されているかどうかは重要です。

  • height:200pxの場合、#aaの50％は100pxです。
  • しかしheight:autoの50％はautoです。これは、autoを展開するためのコンテンツがないため、#bbの場合は0pxです。

仕様書にあるように、包含ブロックが絶対位置に配置されているかどうかも重要ですが、widthに進みましょう。

widthプロパティ：

それで、それはwidthに対して同じように働きますか？ the spec を見てみましょう：

割合は、生成されたボックスの包含ブロックの幅に対して計算されます。

widthの代わりにheightを変化させるために前の例から微調整した、これらの身近な例を見てください。

<div   id="c"  style="width: 200px; height: 100px; background-color: orange">
  <div id="cc" style="width: 50%;   height: 100px; background-color: blue"></div>
</div>
<div   id="d"  style="            height: 100px; background-color: orange">
  <div id="dd" style="width: 50%; height: 100px; background-color: blue"></div>
</div>
  • width:200pxの場合、#ccの50％は100pxです。
  • heightとは異なり、width:autoの50％がwidth:autoの最終的な値の50％です。この場合を別の方法で扱う特別な規則はありません。

autoはwidthとheightのどちらに指定されているかによって部分的に異なります。 heightの場合、内容に合わせて必要な高さ*を意味するだけですが、widthの場合、autoは実際にはもっと複雑です。この場合、ビューポートの幅になっているコードスニペットからわかります。

スペックはwidthの自動値についてのものです _とは何ですか？

幅は他のプロパティの値によって異なります。以下のセクションを参照してください。

Wahey、それは役に立ちません。問題を解決するために、 "通常のフロー内のブロックレベル、置換されていない要素" というタイトルの「幅とマージンの計算」というタイトルの関連セクションを見つけました。

他のプロパティの使用値には、次の制約があります。

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' =包含ブロックの幅

widthと関連するマージン、ボーダー、パディングボーダーをすべて含めると、ブロックの幅になります（heightの動作方法では、 not の子孫になります）。もう1つだけスペックセンテンス：

'width'が 'auto'に設定されている場合、他の 'auto'値は '0'になり、 'width'は結果として得られる等式から得られます。

ああ！したがって、この場合、width:autoの50％はビューポートの50％です。うまくいけば、すべてがようやく意味を成します。

脚注

*少なくとも、この場合は重要です。 spec すべての権利、すべての種類のものだけが意味を成します。

113
Flimm

たとえそのコンテナの高さがパーセントで定義されていても、あなたはそれに親コンテナを与える必要があるだけだと思います。これはうまく動作するように縫い合わせています。JSFiddle

html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%;
}
.wrapper { 
    width: 100%; 
    height: 100%; 
}
.container { 
    width: 100%; 
    height: 50%; 
}
10
David Martins

あなたはそれに高さを持つコンテナを与える必要があります。 widthはビューポートをデフォルトの幅として使用します

7
swider

他のオプションはdivにスタイルを追加することです

<div style="position: absolute; height:somePercentage%; overflow:auto(or other overflow value)">
 //to be scrolled 
</div>

そしてそれは、要素が最も近い位置にある祖先に対して相対的に位置していることを意味します。

5
Niv Kremer

コンテンツがないと、高さにはパーセンテージを計算するための値がありません。ただし、親が指定されていない場合、幅はDOMからのパーセンテージになります。 （あなたの例を使用して）最初のdivの内側に2番目のdivを配置すると、結果がレンダリングされていたでしょう...下の例...

<div id="working">
  <div id="not-working"></div>
</div>

2番目のdivは、最初のdivの高さの30％になります。

2
the code war