右側のブラウザのサイズが不足しているのはなぜですか？

Question

コンテナの右側にブラウザがなくなり、スクロールバーが表示されます。

ブラウザに合わせて調整するにはどうすればよいですか？ そして、底部はブラウザの底に届かない...どんな考え？

.container { 
    border: 1px solid #ffffff; 
    margin-top: 60px; 
    margin-left: 200px; 
    min-width: 100%; 
    min-height: 100%; 
    position: absolute; 
} 

Answer 1

あなたが設定したmin-width: 100%とhorisontalスクロールバーで終わる100％+ 200pxの合計、で終わるmargin-left: 200px。

余裕があり、残りのサイズがウィンドウのサイズになるようにするには、これを行うことができます：max-width: calc(100% -200px);と残りの部分を同じに保ちます。

比較的新しいブラウザでのみ動作します。

Answer 2

min-width: calc(100% - 202px);を使用して、幅で定義した余白と枠線を含めます。

高さはすべての親要素の高さが定義されていることを確認してください。body, html: height: 100%;を追加する必要があります。この場合は、box-sizing: border-box;も追加しますが、border-boxには既に幅の枠が含まれているため、上記の幅の設定はmin-width: calc(100% - 200px);にする必要があります。

Answer 3

幅のある国境を使用する場合：100％次に使用する必要がありますボックスサイズ：border-box;

position: absolute; 
top: 60px; 
left:0px; 
min-width: 100%; 
min-height: 100%; 
border: 1px solid #ffffff; 
background:red; 
box-sizing:border-box;