CSS Ansichtsfensterhöhe: 100vh funktioniert nicht richtig mit Inhalt in der div

Ich bin neu hier und registriert, weil ich meine Antwort in den bestehenden Laufflächen nicht finden konnte.CSS Ansichtsfensterhöhe: 100vh funktioniert nicht richtig mit Inhalt in der div

Ich versuche eine einseitige Website zu erstellen und möchte, dass die Zielseite einen vollständigen Hintergrund hat. Ich hatte den Hintergrund auf der ganzen Seite, aber als ich anfing, Text in das Div zu setzen, brach es. Früher habe ich die folgende 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; 
}

mit folgenden 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>

Sie das Ergebnis hier sehen können: http://codepen.io/Luchadora/full/waYzMZ Oder sehen meine Feder: http://codepen.io/Luchadora/pen/waYzMZ

Wie Sie sehen Bei der Positionierung des Einführungstextes (p.hello {margin: 30px;} hat sich die Hintergrundgröße geändert und ist nicht mehr Vollbild. (Btw: Ich habe einen Beispielhintergrund verwendet). Auch die anderen Seiten haben jetzt Leerzeichen.

Wie kann ich das beheben? Ich habe Artikel über Viewports gelesen, aber ich denke, das einzige, was ich dafür brauche, ist height: 100vh;, richtig? Danke im Voraus!

Quelle

2015-07-24 Luchadora

Ihr Problem ist mit margin collapsing:

Eltern und erste/letzte Kind
Wenn es keine Grenze, Polsterung, Inline-Inhalt oder Spiel den margin-top eines Blocks mit dem margen zu trennen Oben am ersten untergeordneten Block oder ohne Rahmen, Füllung, Inline-Inhalt, Höhe, Min-Höhe oder Max-Höhe, um den unteren Rand eines Blocks mit dem unteren Rand des letzten untergeordneten Elements zu trennen, dann werden diese Ränder reduziert. Der reduzierte Rand endet außerhalb des übergeordneten Elements.

.text-center {padding:1px;}

Updated pen

Quelle

2015-07-24 10:06:26 Pete

Dank, das funktioniert! Am Ende habe ich einfach das '{padding: 1px;}' zum div mit dem Hintergrund (der '.intro' Klasse) hinzugefügt, das funktioniert auch. Zumindest bei meiner Version auf dem Desktop, aber nicht im Codepen-Beispiel. Aber jetzt habe ich eine horizontale Bildlaufleiste, und 'overflow-x: hidden' funktioniert nicht, ich denke immer noch unsere diese. Spielt es eine Rolle, wenn ich '{padding: 1px;}' auf dem 'p' oder auf dem' intro div' platziere? – Luchadora

ah ok, wenn Sie eine Breite eingestellt und Polsterung hinzugefügt haben, wird die Polsterung zur Breite hinzugefügt (zB 100% + 2px). Um dies zu umgehen, können Sie 'box-sizing: border-box' hinzufügen - das bedeutet, dass alle Abstände in der Breite enthalten sind. Das Padding sollte auf dem Element gehen, das das 'p' (oder irgendeinen seiner Eltern) umhüllt – Pete

danke für die Lösung und Erklärung! Am Ende habe ich es mit einem 'overflow-x: hidden' auf beiden' html, body' im css behoben. – Luchadora

Sie haben nicht deaktiviert den Rand des Körpers:

Um Ihr Problem, fügen Sie einige padding .text-center zu lösen. Fügen Sie diese auf Ihrem CSS

body{ 
    margin:0px; 
}

edit: Die Antwort Pete geschrieben scheint die komplette Lösung, leider war zu langsam!

Quelle

2015-07-24 10:14:42

-1

Dies wurde bereits oben in einem Nebengespräch gesagt, aber es funktionierte für mich und ich möchte, dass die Leute es leicht finden.

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

Quelle

2015-12-23 08:51:18

CSS Ansichtsfensterhöhe: 100vh funktioniert nicht richtig mit Inhalt in der div

Antwort

Verwandte Themen