Warum hat die rechte Seite die Browsergröße nicht erreicht?

Question

Die rechte Seite des Containers wird aus dem Browser entfernt und eine Bildlaufleiste wird angezeigt.

Wie kann ich anpassen, um nur in den Browser passen? Und die Unterseite erreicht nicht die Unterseite des Browsers ... Irgendeine Idee?

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

Answer 1

Sie haben festgelegt min-width: 100% UND margin-left: 200px die + 200px in insgesamt 100% endet, die mit einem horisontal Scrollbar endet.

Wenn Sie den Rand, UND die Größe der Rest der Größe des Fensters wollen, können Sie dies tun: max-width: calc(100% -200px); und einfach den Rest gleich.

Funktioniert nur in relativ neuen Browsern.

Answer 2

Verwenden Sie min-width: calc(100% - 202px);, um den Rand und die Ränder einzubeziehen, die Sie in der Breite definiert haben.

Stellen Sie für die Höhe sicher, dass alle übergeordneten Elemente definierte Höhen haben. Dies kann auch bedeuten, dass Sie body, html: height: 100%; hinzufügen müssen. In diesem Fall fügen Sie auch box-sizing: border-box; hinzu, aber dann sollte die oben angegebene Breite min-width: calc(100% - 200px); sein, da border-box bereits die Grenze in der Breite enthält.

Answer 3

Wenn Sie Rand mit der Breite verwenden: 100% dann müssen Sie Box-Sizing verwenden: border-box;

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