Почему правая сторона заканчивается размером браузера?

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% И margin-left: 200px, который заканчивается в общей сложности 100% + 200px, который заканчивается с горизонтальном скроллинга.

Если вы ХОТИТЕ край, а размер будет остальным размером окна, вы можете сделать это: max-width: calc(100% -200px); и просто сохранить остальное то же самое.

Работает только в относительно новых браузерах.

Answer 2

Используйте min-width: calc(100% - 202px);, чтобы указать границы и границы, определенные вами по ширине.

Для высоты убедитесь, что все родительские элементы заданы высотой, что также может означать, что вы должны добавить body, html: height: 100%;. В этом случае также добавьте box-sizing: border-box;, но тогда установка ширины выше должна быть min-width: calc(100% - 200px);, так как рамка уже включает границу ширины.

Answer 3

если вы используете границу с шириной: 100%, то вы должны использовать размер коробки: рамка;

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