104

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

#containerを除くすべての要素のパディングとマージンを0に設定しました。#containerdivの絶対位置を意図的に省略していることに注意してください。この場合、ブラウザは体の高さをどのように計算し、マージンはそれにどのように影響しますか？

<!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の例

4

15 に答える 15

74

との背景をペイントするhtmlとbody（それぞれに独自の色を付ける）body 、が一緒に下にシフトされていることに#containerすぐに気付くでしょう。#containerそれ自体は上からまったくオフセットされていませんbody。これはマージン崩壊の副作用であり、ここで詳しく説明します（ただし、その回答はわずかに異なる設定を説明しています）。

bodyの高さを100％と宣言しているため、スクロールバーが表示されるのはこの動作ですhtml。マージンは高さの計算に含まれないため、の実際の高さbodyは影響を受けないことに注意してください。

于 2012-10-20T15:36:06.287 に答える
27

@BoltClock♦の回答に基づいて、マージンをゼロにすることで修正しました
...

html,body, #st-full-pg {
   height: 100%;
   margin: 0;
}

id "st-full-pg"がパネルdiv（さらにpanel-headingとpanel-bodyを含む）に割り当てられている場合に機能します

于 2017-01-04T11:05:30.303 に答える
23

少し遅いですが、多分それは誰かを助けます。

W3Cが言うように、に追加float: left;するとスクロールバーが削除されます。#container

•フロートボックスと他のボックスの間のマージンは崩壊しません（フロートとその流入する子の間でも）。

于 2014-03-04T08:37:00.033 に答える
5 
html,body {
   height: 100%;
   margin: 0;
   overflow: hidden;
}

これは私のために働いた

于 2017-10-13T20:06:49.583 に答える
3

追加するfloat:left;のは良いことですが、を使用して中央の水平位置を妨げることになりますmargin:auto;

マージンの大きさがわかっている場合は、calcを使用して身長のパーセンテージでそれを説明できます。

height: calc(100% - 50px);

ブラウザのサポートは良好ですが、IE11+ https: //caniuse.com/#feat=calcのみ

于 2017-10-20T11:03:39.097 に答える
1

私は解決策を見つけました：パディングを追加します：1px 0; 本体に垂直スクロールバーが表示されないようにする

于 2018-04-07T03:56:37.507 に答える
1 
/*removes default margin & padding*/
html, body{
    padding: 0px !important;
    margin: 0px !important;
}

/*sets body height to max; and allows scrollbar as page content grows*/
body{
    min-height: 100vh;
}
于 2019-06-06T09:14:47.853 に答える
0 
html, body {
    height: 100%;
    overflow: hidden;
}

ボディスクロールを削除する場合は、次のスタイルを追加します。

body {
    height: 100%;
    overflow: hidden;
}
于 2017-03-23T08:37:47.747 に答える
0

bodyのすべてのコンテンツをwrapというdivに入れる前に、この問題が修正されているのを見ました。ラップのスタイルはに設定する必要がありますposition: relative; min-height: 100%;。#containerdivを上から左に50px配置するには、パディングを50pxに設定してdivをラップの内側に配置します。マージンは、ラップと先ほど作成したdivでは機能しませんが、その#container中のすべてで機能します。

これがjsfiddleの私の修正です。

于 2017-05-28T05:08:05.027 に答える
0

@BoltClockに触発されて、これを試してみましたが、ズームアウトおよびズームインしても機能しました。

Browser: Chrome 51

html{
  height: 100%;
}
body{
  height: 100%;
  margin: 0px;
  position: relative;
  top: -20px;
}

body20px下にシフトしたと思います。

于 2018-06-27T04:59:15.513 に答える
0

コードサンプルも含まれている、より理解しやすい回答を求めてここに来る人にとって、この回答（ここからコピー）はあなたにぴったりです。

JavaScriptや明確なピクセル値（など）は必要ありません100px。純粋なCSSとパーセンテージだけです。

あなたのdivがそれだけでそこに座っている場合height: 50%、体の高さの50％を意味します。通常、体の高さは目に見えるコンテンツがない場合はゼロであるため、その50％はちょうどゼロです。

これが解決策です（これに基づいています）（行のコメントbackgroundを外してパディングを視覚化します）：

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html
{
  height: 100%;
  
  /* background: green; */
}

body
{
  /*
    100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
    This prevents an unnecessary vertical scrollbar from appearing.
  */
  height: calc(100% - 1em);
  
  /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}
<div></div>

上記は、通常のパディングが引き続き存在するように作成されています。赤の寸法をに設定してdivも100%、両側/端にパディングが表示されます。このパディングが必要ない場合は、これを使用してください（見栄えは良くありませんが、最初の例を使用することをお勧めします）。

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html, body
{
  height: 100%;
}

/* You can uncomment it but you wouldn't be able to see it anyway. */

/*
html
{
  background: green;
}
*/

body
{
  margin: 0;
  
 /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}
<div></div>

于 2019-07-20T07:41:03.337 に答える
0

bodyタグにノーブレークスペースを追加できます。

<body> &nbsp; <othertags>...</body>
于 2021-06-16T09:42:06.110 に答える
-1

わたしにはできる：

html,
body {
    height: 100%;
    height: -webkit-fill-available; // Chrome
}

// Firefox
@-moz-document url-prefix() {
    body {
        box-sizing: border-box; 
        margin: 0;
        padding: 1px;
    }
}
于 2021-01-07T23:18:00.430 に答える
-3

overflow: hidden;HTMLと本文に追加します。

html, body {
  height: 100%;
  overflow: hidden;
}
于 2015-07-25T15:23:18.010 に答える
-10

簡単な解決策を見つけました。高さを100％ではなく99.99％に設定してみてください

于 2013-12-08T11:57:12.367 に答える