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 😉
