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％ではなく、コンテンツから高さのみを取得します。

csshtmlpercentagejsfiddle
22
ZedBee

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

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
Derek 朕會功夫

bodyとhtmlにも高さを与える必要があります。それ以外の場合、ボディはそのコンテンツ（単一の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
Boguz Didgeridoo