Блог

У меня есть страница со следующей структурой:

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

Я хочу, чтобы вся страница была точно такой же высокой, как окно просмотра, т. Е. height: 100vh;

Проблема в том, что я хочу, чтобы раздел содержимого был таким высоким, какой необходим для заполнения страницы, но в то же время прокручивался (на случай, если его дочерние элементы слишком высокие).

Одним из простых решений было бы установить высоту содержимого calc(100vh - height_of_header) , но, к сожалению, это не обсуждается, потому что высота заголовка не всегда постоянна.

Я попытался настроить height: -webkit-fill-available раздел содержимого, но это не сработало (как ни странно, это имело тот же эффект, height: 100% что и)

Я рассматриваю возможность использования JS для решения этой проблемы, но мне бы хотелось увидеть решение только для CSS.

Я бы предпочел решение, которое не требует display: grid , но это тоже хорошо! Спасибо! 🙂

Вот созданный мной codepen, на случай, если это может быть полезно.

Вы должны добавить overflow-y: hidden (хотя auto и scroll работать также) к родительскому элементу ( <main> в данном случае).