web-dev-qa-db-ja.com

パーセンテージでのDivの高さ

可能性のある複製:
パーセント高さHTML 5/CSS

これは単純なものである必要がありますが、divのパーセンテージで指定された高さが適用されないのはなぜですか。

例えば:

<div class="container">
  adsf
</div>

CSS:

.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

高さを%からpxに変更すると、完全に機能します。 %はpxと同じくらい有効ですが、なぜpxだけが機能し、%は機能しません。 ここ はjsfiddleです

Edit元の質問で50%の後にセミコロンを見逃したが、それは完全に台無しにした。実際、私が尋ねたのは、なぜ50%がコンテナの50%を消費しないのかということでした。コンテナの50%ではなく、コンテンツから高さのみを取得します。

22
ZedBee

「ページ全体」はコンテンツの高さだけであるため、ページ全体の50%は必要ありません。囲むhtmlbody100%の高さに変更すると、動作します。

html, body{
    height: 100%;
}
div{
    height: 50%;
}

http://jsfiddle.net/DerekL/5YukJ/1/

enter image description here

^ドキュメントの高さはわずか20ピクセルです。 20pxの50%は10pxであり、期待したものではありません。

enter image description here

^ここで、ドキュメントの高さをページ全体の高さ(150px)に変更すると、150pxの50%が75pxになり、機能します。

63

bodyhtmlにも高さを与える必要があります。それ以外の場合、ボディはそのコンテンツ(単一のdiv)と同じ高さであり、その50%はこのdivの半分の高さになります。

更新されたフィドル: http://jsfiddle.net/j8bsS/5/

3
Mr Lister

「50%」の後にセミコロンがありません(;)

ただし、divの割合がそれを含むdivに接続されていることにも注意してください。

例えば:

<div id="wrapper">
  <div class="container">
   adsf
  </div>
</div>

#wrapper {
  height:100px;
}
.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

ここで、.containerの高さは50ピクセルになります。ラッパーdivからの100pxの50%です。

あなたが持っている場合:

adsf

#wrapper {
  height:400px;
}
.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

.containerは200ピクセルになります。ラッパーの50%。

したがって、「。container」を「ラップ」するdivを確認することをお勧めします。

1