Vertikal zentriert Vollbild div mit Bildlaufleiste

-1

Heiraten Sie alle an Sie!Vertikal zentriert Vollbild div mit Bildlaufleiste

Ich möchte Vollbild, vertikal zentriert div Overlaying alle Inhalte unten machen.

/* css */ 
#box { 
    background: #fff; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow-y: auto; 
} 

/* It is <body> tag class */ 
.overlay-hidden { 
    overflow: hidden; 
} 

<!-- html --> 
<body class="overlay-hidden"> 
    <div id="box"> 
     <!-- #box popup content goes here --> 
    </div> 
    <div class="container"> 
     <!-- content goes here --> 
    </div> 
</body>

Hier ist mein Code: https://jsfiddle.net/uzy78s69/ Es scheint groß zu arbeiten, aber wenn ich mehr Inhalt zu #box hinzufügen funktioniert es nicht gut https://jsfiddle.net/uzy78s69/1/

Click X oder Create new post Verhalten zu überprüfen.

Was mache ich falsch? Wie kann ich es reparieren?

Quelle

2016-12-25 Jarmark

überprüfen haben 'align-Artikel: center;' diesen Teil ... wenn ich es funktioniert es nicht markiert .... I denkst du willst so ??? –

** vertikal zentriert Vollbild ** was meinst du? Was ist der Zweck, um Inhalte voller Breite zu zentrieren? –

@dreamhunter Mit Fullscreen habe ich den gesamten Browserbereich überlaufen lassen 'width: 100%; Höhe: 100% '. 'div' sollte auch vertikal und horizontal zentriert sein. – Jarmark

Gerade

#box > .container { 
    max-height: 100%; 
}

JSfiddle hinzufügen: jsfiddle.net/uzy78s69/3

Quelle

2016-12-25 16:44:06 pol

Entfernen Sie einfach display:flex; von #box Klasse.

Example

Quelle

2016-12-25 16:29:19

Vertikal zentriert Vollbild div mit Bildlaufleiste

Antwort

Verwandte Themen