Overflow: Versteckt nicht mit vollen Viewport-Abschnitten

Question

Ich habe eine Einrichtung mit mehreren Abschnitten, die eine Vollbildbreite und -höhe haben. Ob ich sie absolut oder relativ positioniere funktioniert der Überlauf immer noch nicht.

DEMO

section { 
    height: 100vh; 
    width: 100vw; 
    overflow: hidden; 
} 

#a { 
    background: linear-gradient(1deg, #9f00b8, #2a032d); 
    position: absolute; 
} 

#b { 
    background: linear-gradient(1deg, #25cc00, #2a032d); 
    left: 100vw; 
    position: relative; 
} 

Answer 1

ändern height: 100vh; und width: 100vw;

So:

width: 100%; 
height: calc(100% - 0px); 
// height: 100vh; 
// width: 100vw; 

Und die folgende Zeile ändern:

#b { 
    background: linear-gradient(1deg, #25cc00, #2a032d); 
    //left: 100vw; 
    left: 100%; 
    position: relative; 
} 

Also ich denke, calc ist Ihre Lösung vielleicht gibt es eine andere Lösung. Jetzt benötigen Sie Browser-Unterstützung für Calc.

width: -webkit-calc(100% - 0px); 
width: -moz-calc(100% - 0px); 
width: calc(100% - 0px); 
height: -webkit-calc(100% - 0px); 
height: -moz-calc(100% - 0px); 
height: calc(100% - 0px); 

Ich hoffe, es wird helfen.

Arbeiten fiddle

Wenn Sie vh mit Calc verwenden möchten() können Sie diese Antwort überprüfen It is possible to use vh minus pixels in a CSS calc()?