zentriert DIV nicht vollständig in kleinen Auflösungen,

Question

In kleinen Auflösung wie 540x960 und 960x540 meine Seite hat seltsames Verhalten. Diese Auflösungen sollen nicht vollständig reaktionsfähig sein, sie müssen nach oben/unten oder nach links/rechts gescrollt werden, um den vollständigen Inhalt zu sehen. Problem ist mit zentriertem DIV.

HTML:

<div class="age-warning-content"> 

    .... 


</div> 

CSS:

.age-warning-content { 

    background:white !important; 
    width:630px; 
    height:550px;  
    position: absolute; 
    left: 50%; 
    top: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

Es war Teil der zentrierten DIV wie diese Kulturen:

• Wenn 540x960 dann linken Teil abgeschnitten wird (nicht sichtbar). Sie können den Inhalt nach rechts scrollen, aber nicht nach links scrollen, um diesen Teil zu sehen.

• Wenn 960x540 dann Oberteil abgeschnitten wird (nicht sichtbar)

Top Teil I mit der feinfühligen css fixiert. Aber ich habe nicht auf der linken Seite gearbeitet.

@media screen and (min-width: 360px) and (max-width: 779px) { 
    .age-warning-content { 


     margin-top: 90px; 


    } 

} 

Problem: Centered DIV nicht vollständig sichtbar in kleinen Auflösungen. Problem tritt auf PC und auf Iphone 6-Bildschirmen auf.

Answer 1

, das ist, weil Sie Breite anzuwenden, die größer ist als jeweilige Bildschirmgröße ist

wenn möglich Sie max-width:630px; width: 80%; und max-height:550px; height: 80%;

anwenden können, wie ich hier

.age-warning-content { 
    background:white !important; 
    max-width:630px; 
    width: 80%; 
    max-height:550px;  
    height: 80%; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

tat

sehen fiddle