Wysokość rzutni CSS: 100vh nie działa poprawnie z zawartością w div

Jestem tu nowy i zarejestrowany, ponieważ nie mogłem znaleźć odpowiedzi w istniejących bieżnikach.Wysokość rzutni CSS: 100vh nie działa poprawnie z zawartością w div

Próbuję utworzyć stronę jednostronicową i chcę, aby strona docelowa miała pełne tło. Miałem tło na całej stronie, ale kiedy zacząłem umieszczać tekst w dziale, to się zepsuło. Użyłem następujący 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; 
}

z następującymi 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>

widać wynik tutaj: http://codepen.io/Luchadora/full/waYzMZ Albo zobaczyć moje pióra: http://codepen.io/Luchadora/pen/waYzMZ

Jak widać , podczas pozycjonowania tekstu wprowadzającego (p.hello {margin: 30px;}, wielkość tła zmieniła się i nie jest już pełnoekranowym (Btw: użyłem przykładowego tła), a także inne strony mają teraz białe spacje ..

Jak mogę to naprawić? Czytałem artykuły o rzutniach, ale myślę, że jedyną rzeczą, której potrzebuję, jest height: 100vh;, prawda? Z góry dziękuję!

Źródło

2015-07-24 Luchadora

Twój problem jest z margin collapsing:

Dominującą i pierwszego/ostatniego dziecka
Jeśli nie ma granic, wyściółka, zawartość inline lub klirens oddzielić margin-top bloku z margin- u góry pierwszego bloku podrzędnego lub bez obramowania, wypełnienia, zawartości w linii, wysokości, minimalnej wysokości lub wysokości maksymalnej, aby oddzielić margines-dół bloku od marginesu-końca ostatniego elementu potomnego, a następnie marginesy zawodzą. Zawalony margines kończy się poza rodzicem.

Aby rozwiązać problem, należy dodać pewne dopełnienie do .text-center:

.text-center {padding:1px;}

Updated pen

Źródło

2015-07-24 10:06:26 Pete

Dzięki, to działa! W końcu właśnie dodałem '{padding: 1px;}' do div z tłem (klasa ".intro"), które też działa. Przynajmniej na mojej wersji na komputerze, ale nie w przykładzie Codepen. Ale teraz mam poziomy pasek przewijania, a 'overflow-x: hidden' nie działa, wciąż zastanawiam się nad tym. Czy ma znaczenie, czy umieszczam '{padding: 1px;}' na 'p' lub na' intro div'? – Luchadora

ah ok, jeśli ustawiłeś szerokość i dopełnienie, dopełnienie zostanie dodane do szerokości (np. 100% + 2px). aby ominąć to, możesz dodać 'box-sizing: border-box' - oznacza to, że dowolne dopełnienie będzie zawarte w szerokości. Wypełnienie powinno iść na element owijający "p" (lub którykolwiek z jego rodziców) – Pete

dziękuję za rozwiązanie i wyjaśnienie! W końcu naprawiłem to za pomocą 'overflow-x: hidden' na obu' html, body' w css. – Luchadora

Nie wyłączył margines organizmie. Dodaj to do swojego CSS

body{ 
    margin:0px; 
}

edytuj: odpowiedź, którą Pete opublikował, wydaje się być kompletnym rozwiązaniem, przepraszam było zbyt wolne!

Źródło

2015-07-24 10:14:42

-1

To zostało już powiedziane powyżej w rozmowie pobocznej, ale zadziałało to dla mnie i chcę, aby ludzie mogli ją łatwo znaleźć.

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

Źródło

2015-12-23 08:51:18

Wysokość rzutni CSS: 100vh nie działa poprawnie z zawartością w div

Odpowiedz

Powiązane problemy