☰

CSS の高さをパーセントで指定しても機能しない [重複] 質問する

tag-icon • tag-icon html css
CSS の高さをパーセントで指定しても機能しない [重複] 質問する

次のような簡単なコードがあります:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <title>Live Feed</title>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <style>
    body {
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>

<body>
  <div style="background-color: #eeaabb; width: 250px; height: 100%; border-right: solid 1px #e1e1e1;">
    I should be tall
  </div>
</body>

</html>

しかし、div は高さが 100% で表示されません。なぜでしょうか?

ベストアンサー1

親要素（この場合はbodyとhtml）すべてに100%の高さを設定する必要があります。フィドルそれが機能していることを示しています。

html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }
<html><body><div></div></body></html>

おすすめ記事