Altezza viewport CSS: 100vh non funziona correttamente con il contenuto nel div

Sono nuovo qui e registrato perché non sono riuscito a trovare la risposta nei gradini esistenti.Altezza viewport CSS: 100vh non funziona correttamente con il contenuto nel div

Sto provando a creare un sito Web di una pagina e desidero che la "pagina di destinazione" abbia uno sfondo completo. Avevo lo sfondo su tutta la pagina, ma quando ho iniziato a inserire il testo nel div, si è rotto. Ho usato il seguente CSS (sass):

.intro { 
    color: #fff; 
    height: 100vh; 
    background: url('http://www.flabber.nl/sites/default/files/archive/files/i-should-buy-a-boat.jpg') no-repeat center center; 
    background-size: cover; 

    &--buttons { 
     position: absolute; 
     bottom: 2em; 
    } 
} 

p.hello { 
    margin: 30px; 
} 

.page1 { 
    color: #fff; 
    height: 100vh; 
    background: beige; 
} 

.page2 { 
    color: #fff; 
    height: 100vh; 
    background: black; 
}

Con il seguente codice HTML:

<html> 
    <head> 
     <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> 
     <title>My title</title> 
    </head> 

    <body> 
     <div class="container"> 
      <div class="row"> 

       <div id="intro" class="intro"> 

        <div class="text-center"> 
         <p class="hello"> 
          Intro text is coming soon! 
         </p> 
          <div class="col small-col-12 intro--buttons"> 
           <p>Buttons coming here. 
           </p> 
          </div> 
        </div> 

       </div> 

       <div id="page1" class="col col-12 page1"> 
        <p>Tekst test</p> 
       </div> 

       <div id="page2" class="col col-12 page2"> 
        <p>Tekst test.</p> 
       </div> 

      </div> 
     </div> 
    </body> 
</html>

Potete vedere il risultato qui: http://codepen.io/Luchadora/full/waYzMZ O vedere la mia penna: http://codepen.io/Luchadora/pen/waYzMZ

Come si vede , quando si posiziona il testo introduttivo (p.hello {margin: 30px;}, la dimensione dello sfondo è cambiata e non è più a schermo intero. (Btw: ho usato uno sfondo di esempio). Anche le altre pagine hanno spazi bianchi ora ..

Come posso risolvere questo? Ho letto articoli su viewport, ma penso che l'unica cosa di cui ho bisogno è height: 100vh;, giusto? Grazie in anticipo!

fonte

2015-07-24 Luchadora

Il tuo problema è con margin collapsing:

Capogruppo e primo/ultimo figlio
Se non c'è confine, padding, contenuto in riga, o spazio per separare il margin-top di un blocco con l'marginalmente parte superiore del suo primo blocco figlio, o senza bordo, riempimento, contenuto in linea, altezza, altezza minima o altezza massima per separare il margine inferiore di un blocco con il margine inferiore del suo ultimo figlio, quindi i margini si comprimono. Il margine collassato finisce fuori dal genitore.

per risolvere il problema, aggiungere un po 'di imbottitura .text-center:

.text-center {padding:1px;}

Updated pen

fonte

2015-07-24 10:06:26 Pete

Grazie, funziona! Alla fine ho aggiunto il '{padding: 1px;}' al div con lo sfondo (la classe '.intro'), che funziona anche. Almeno, sulla mia versione sul desktop, ma non nell'esempio Codepen. Ma ora ho una barra di scorrimento orizzontale e 'overflow-x: hidden' non funziona, sto ancora pensando a quello. È importante se metto il '{padding: 1px;}' sul 'p' o sul' intro div'? – Luchadora

ah ok, se hai impostato una larghezza e aggiunto padding, il padding verrà aggiunto alla larghezza (ad es. 100% + 2px). per aggirare questo, è possibile aggiungere 'dimensionamento della scatola: border-box' - questo significa che qualsiasi riempimento sarà incluso nella larghezza. Il padding dovrebbe andare sull'elemento che avvolge il 'p' (o uno dei suoi genitori) – Pete

grazie per la soluzione e la spiegazione! Alla fine l'ho risolto con un 'overflow-x: hidden' su entrambi' html, body' nel css. – Luchadora

Non hai disattivato il margine del corpo. Aggiungi questo alla tua CSS

body{ 
    margin:0px; 
}

edit: La risposta Pete postato sembra essere la soluzione completa, mi dispiace era troppo lento!

fonte

2015-07-24 10:14:42

-1

Questo è stato già detto sopra in una conversazione secondaria, ma ha funzionato per me e voglio che le persone lo trovino facilmente.

-- overflow-x:hidden; on both html, body in the css.

fonte

2015-12-23 08:51:18

Altezza viewport CSS: 100vh non funziona correttamente con il contenuto nel div

risposta

Problemi correlati