BinaryDevelop
  1. ホーム
  2. html

[解決済み] 縦スクロールバーを表示したときのボディの高さ100

2022-12-15 17:02:05

質問

好奇心で、以下の例を考えると、なぜ#container divにマージンがあると、ブラウザに垂直スクロールバーが表示されるのでしょうか？コンテナの高さは、100% に設定されている本体の高さよりはるかに小さいです。

コンテナ以外の要素について、パディングとマージンを0に設定しました。なお、#container divの絶対位置指定は意図的に省略しています。この場合、ブラウザはどのようにbodyの高さを計算し、マージンはそれにどのように影響するのでしょうか？ 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
  padding:10px;
  margin:50px;
  border:1px solid black;
  width: 200px;
  height: 100px;
}
</style>
</head>
<body>
  <div id='container'>
  </div>
</body>
</html>

また、この例は JSFiddle

どのように解決するのですか？

の背景を塗ると html と body (それぞれに色をつける) を見ると、すぐに気づくだろう。 body と共に下にシフトされていることに気づくでしょう。 #container であり #container の先頭からオフセットされているわけではありません。 body の先頭から全くずれていません。これは マージン崩壊 の副作用で、詳しくは ここで を参照してください (ただし、この回答では少し異なるセットアップを説明しています)。

を宣言しているので、スクロールバーが表示されるのはこの動作のせいです。 body の高さが 100%になるように html . 実際の高さは body の実際の高さは影響を受けません。マージンは高さの計算に決して含まれないからです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します