23

重複の可能性:
高さのパーセンテージ HTML 5/CSS

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

例えば：

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

CSS:

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

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

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

4

3 に答える 3

70

「ページ全体」はコンテンツの高さだけであるため、ページ全体の50％を占めることはありません。囲みhtmlと高さをbody変更すると、機能します。100%

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

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

ここに画像の説明を入力してください

^あなたの文書はたった20pxの高さです。20pxの50％は10pxであり、それはあなたが期待したものではありません。

ここに画像の説明を入力してください

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

于 2013-01-27T08:03:08.107 に答える
3

bodyとhtml高さも指定する必要があります。それ以外の場合、本体はその内容（単一のdiv）と同じ高さになり、その50％はこのdivの高さの半分になります。

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

于 2013-01-27T08:02:32.737 に答える
1

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

ただし、div のパーセンテージは、それを含む div に接続されていることにも注意してください。

例えば：

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

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

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

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

広告f 

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

次に、.container は 200px になります。ラッパーの 50%。

したがって、「.container」を「ラップ」する div を見たいと思うかもしれません...

于 2013-01-27T08:09:27.607 に答える