Jak dopasować stronę do wysokości ekranu przeglądarki?

Joanna

Początkujący

CSS

How to set div to 100% browser height?

Tworząc jedną ze stron internetowych chciałam, aby jeden z divów rozciągnięty był zawsze na całą wysokość przeglądarki, niezależnie od wysokości okna, jaka będzie w danej chwili ustawiona. Osiągnęłam to w prosty sposób, za pomocą css.

Wystarczy, że ustawi się wysokość całego dokumentu html i body na 100% (jeśli pomiędzy elementem body a divem, którego wysokość chcesz ustawić, znajdują się jeszcze inne elementy, im również wysokość trzeba ustawić na 100%) , a następnie na 100% ustawi się również wysokość diva:

Html:


<body>
   <div id="full-page">
      <h2> Nagłówek strony
      </h2>
      <p> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
        ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      </p>
   </div>
   <div id="rest-page">
      <h4> Div widoczny dopiero po przescrollowaniu strony
      </h4>
      <p> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
        ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
   </div>
</body>

Css:


html, body {height: 100%;}

#full-page {height: 100%;}

#rest-page {background-color: yellow;}

Efekt można zobaczyć tutaj. Możesz pobawić się zmniejszając wysokość przeglądarki i sprawdzając jak zachowuje się div 😉

Author: Joanna

Piszę kody, które (zazwyczaj) działają. Tresuję Wordpressa, kodzę z Reactem, zgłębiam świat DevOps i klikam w konsoli Linuxa. Hobbystycznie optymalizuję kod, bo lenistwo to najczystsza forma produktywności. Staram się nie zwariować między bugiem a deadlinem.

O mnie

Może Cię zainteresować

Powiązane posty