身長100％で縦スクロールバーを表示

Question 1

好奇心から、以下の例を考慮すると、＃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の例

Question 2

htmlとの背景をペイントするとbody（それぞれが独自の色を与える）、あなたはすぐに気づくbodyとともに、シフトダウンしている#container、と#container自体が上からオフセットされていないbodyすべての。これはマージン崩壊の副作用であり、ここで詳しく説明します（ただし、その回答はわずかに異なる設定について説明しています）。

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

Question 3

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

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

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

Question 4

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

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

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

Question 5

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

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

height: calc(100% - 50px);

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

Question 6

html,body {
   height: 100%;
   margin: 0;
   overflow: hidden;
}

これは私のために働いた

Question 7

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

Question 8

html, body {
    height: 100%;
    overflow: hidden;
}

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

body {
    height: 100%;
    overflow: hidden;
}

Question 9

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

これがjsfiddleの修正です。

Question 10

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

Browser: Chrome 51

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

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

Question 11

/*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;
}

Question 12

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

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>

スニペットを展開

Question 13

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

html, body {
  height: 100%;
  overflow: hidden;
}

Question 14

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