HTML divの枠線がビューポートの外に出る

OKこれは本当に基本的なようですが、回答が見つからないようです。HTML divの枠線がビューポートの外に出る

境界線のある最上位のdivを定義しましたが、これをビューポートの最大サイズにします。

これは、その最も基本的な形

<body> 
    <div id="main"> 
      test 
    </div> 
</body>

とCSSのコードです：

#main { 
    position:absolute;  
    left:0px; 
    top:0px; 
    width:100%; 
    height:100%; 
    border: 1px green solid; 
}

このJSFiddleを参照してください：

事業部は、1ピクセルを持っている必要があります緑色のボーダーが見えますが、それはいつも底と右のジュスクロールバーを必要とするディスプレイを消してください。

2017-01-05 AEngineer

使用box-sizing: border-box

DIVの幅と高さは、スクロールバーを必要と100％+の2ピクセル（2つの境界、画素毎）です。 box-sizing: border-boxは、幅と高さにパディングとボーダーを含めるようにブラウザに指示するため、これを修正します。

私はほとんど常に使用します。

* { 
    box-sizing: border-box; 
}

2017-01-05 23:11:11

感謝！ – AEngineer

身体上のデフォルトのマージンがあります。 0にリセットするためにこれを追加します。

html, body { 
    margin: 0; 
}

PLUS：あなたの#main DIVにbox-sizing: border-box;を追加します。私はそれを知らなくても、長いこの住んでいた信じることができない素晴らしいことだ

2017-01-05 23:13:59 Johannes

フィドルは問題を解決しません。追加のマージンはボーダーに影響しません。 –

申し訳ありませんが、フィドルを間違った状態に保存しました...今すぐ更新 – Johannes

答えて