Высота header равная высоте окна

Question

Нужно сделать header на странице по высоте равный окну.

Я знаю, что высоту можно получить с помощью document.documentElement.clientHeight, но так как я новичок я просто не понимаю, как это сделать.

Answer 1

header {
   height: 100vh; 
}

https://tipue.com/blog/css3-vw-vh/

Answer 2

Если необходимо растянуть header При каком-то действии через именно js, как в вопросе, то можно так:

<style>
    header{
        background-color: #003eff;
        height: 100px;
        text-align: center;
    }
</style>
<header>Пурум Пум Пум</header>
<script language="JavaScript">
    var height = document.documentElement.clientHeight; // Получаем высоту окна
    document.body.addEventListener('click', function () { // Отслеживаем нажатие на header(Можно другие триггеры использовать)
        var head = document.getElementsByTagName('header'); // Получаем header
        head[0].style.height = height; // Меняем высоту.
    })
</script>

БЛОГ НА HUSL

Высота header равная высоте окна

Ответы (2 шт):