2016-10-11 11 views
1
gesetzt mit

Ich bin nicht in der Lage den Überlauf zu machen versteckt werden: http://codepen.io/aiwatko/pen/zKjaLxÜberlauf versteckt funktioniert nicht trotz Höhe

.loader-overlay { 
    position:absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: white; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

Ich habe die vorherigen Threads durchsucht: Ich habe die Höhe auf das Element mit der überlauf: versteckt, setze ich den anderen container (mein content div) auf position: relativ, doch wenn ich während der initialen animation blättere, kann ich immer noch meinen darunterliegenden content sehen. Ich würde mich über Hinweise freuen.

+0

100% ist ein relatives Maß. Was ist das Overlay in WITHIN untergebracht? Sie gehen 100% der Größe dieses Containers und nicht 100% Ihres Browserfensters. –

+1

@MarcB ist korrekt. Ihr übergeordnetes 'loader-overlay' ist' ', das keine eingestellte Höhe hat. Wenn Sie möchten, dass es die Höhe des Fensters ist, können Sie eine Variation von [vh] versuchen (https://snook.ca/archives/html_and_css/vm-vh-units). Vielleicht "Höhe: 100vh;" – Santi

+0

Ich testete es mit Chrome auf Android und es funktioniert wie erwartet, welche Browser geben Ihnen Probleme? –

Antwort

0

Durch Ihre .loader-overlay Höheneinstellung 100% sein, können Sie es sagen 100% seines Mutter zu besetzen. Da das Elternelement in Ihrem Fall body ist, das keine festgelegte Höhe hat, verhält es sich nicht wie erwartet.

Was ich vorschlagen würde, ist CSS3 Viewport Height (vh) auszuprobieren. So etwas wie dies würde setzen Sie die div die Höhe des Ansichtsfensters, die dynamisch auf verschiedene Geräte ändern kann:

height: 100vh; 

Nachdem dies gesagt ist, Ihre content ist nicht einmal in der div mit Überlauf versteckt, so wird es in dem die Höhe Ihrer Seite unabhängig davon, was Sie mit .loader-overlay tun.

+0

Vielen Dank, jetzt habe ich ein besseres Verständnis für die Überlauf-Eigenschaft! – Aiwatko

Verwandte Themen