CSS Overlay rechts ist abgeschnitten

Question

Ich füge ein Overlay div mit der Breite 100%, aber das Overlay div wird nicht vollständig gerendert. Aus irgendeinem Grund sieht es so aus, als ob es sich nach rechts bewegt hätte.

Hier ist fiddle. Sie können überprüfen, ob die Polsterung auf der rechten Seite nicht vollständig angezeigt wird.

html

<div class='overlay'> 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
</div> 

css

.overlay { 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1000000; 
    background-color: rgba(255, 255, 255, 0.85); 
    -webkit-transition: opacity .2s linear; 
    transition: opacity .2s linear; 
    padding: 20px; 
} 

Answer 1

Dichtungen sind nicht in der Breite in HTML berechnet.

Wenn Sie also die Breite auf 100% (relativ zum Fenster) einstellen, wird das Padding außerhalb des Fensters angezeigt.

Wenn Sie die Größe mit der Auffüllung anpassen möchten, sollten Sie keine Breite Eigenschaft festlegen.

Aber in Ihrem Fall ist Ihre Zeichenfolge eine Reihe von "A" s, die die oben aufgeführte Eigenschaft beeinflussen. In diesem Fall müssten Sie die Breite 40 Pixel kürzer als die Fensterbreite festlegen. (Da die Polsterung auf der linken und rechten Seite sind jeweils 20px, 20 + 20 = 40)

document.getElementsByTagName("div")[0].style.width = window.innerWidth - 40 + "px"; 

aus, dass abgesehen, wenn Sie die „A“ s wollen in die nächste Zeile zu bewegen, diese CSS-Eigenschaft verwenden:

word-wrap: break-word; 

Andernfalls verwenden Sie eine der folgenden zwei CSS-Eigenschaften:

overflow: hidden; 
white-space: nowrap; 

Answer 2

Wie Sie padding: 20px verwenden Sie benötigen width und height um 40 zu reduzieren, px, können Sie das mit calc(100% - 40px) tun.

Auch müssen Sie word-wrap: break-word hinzufügen, um langes Wort in div zu brechen.

.overlay { 
    position: fixed; 
    left: 0; 
    top: 0; 

    width: calc(100%-40px); 
    height: calc(100%-40px); 

    z-index: 1000000; 
    background-color: rgba(255, 255, 255, 0.85); 
    -webkit-transition: opacity .2s linear; 
    transition: opacity .2s linear; 

    padding: 20px; 
    word-wrap: break-word; 
} 

Answer 3

Ihre CSS padding Ersetzen mit folgendem Code,

.overlay { 
padding : 20px 0px; 
}