Mam stronę z następującą strukturą:

+-----------------------------------------+
|                 Header                  |
+----------+------------------------------+
| Sidebar  | Content                      |
|          |                              |
|          |                              |
|          |                              |
+----------+------------------------------+

Chcę, aby cała strona była dokładnie tak wysoka jak rzutnia, tj. height: 100vh;

Problem polega na tym, że chcę, aby sekcja zawartości była tak wysoka, jak potrzeba , aby wypełnić stronę, ale być przewijania w tym samym czasie (w przypadku, gdy jego dzieci są zbyt wysokie ).

Jednym łatwym rozwiązaniem byłoby ustawienie wysokości zawartości do calc(100vh - height_of_header), ale jest to niestety poza dyskusją, ponieważ wysokość nagłówka nie zawsze jest stała.

Próbowałem ustawić height: -webkit-fill-available w sekcji zawartości, ale to nie działało (wystarczająco dziwnie, miał ten sam efekt, co height: 100%)

Rozważam użycie JS, aby to rozwiązać, ale chciałbym zobaczyć rozwiązanie tylko CSS.

Wolałbym rozwiązanie, które nie wymaga display: grid, ale to również w porządku! Dziękuję Ci! :)

Oto kodepen, jaki wykonałem, na wypadek, gdyby to może być pomocne.

1
wil93 29 październik 2020, 13:32

1 odpowiedź

Najlepsza odpowiedź

Powinieneś dodać overflow-y: hidden (chociaż auto i scroll działa również) do elementu macierzystego (<main> w tym przypadku).

1
wil93 30 październik 2020, 04:54