Высота тега html body

Рейтинг: 0Ответов: 1Опубликовано: 24.02.2023

Как правильно указать высоту блокам html и body?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>App</title>
        <link rel="stylesheet" type="text/css" href="style/style.css">
    </head>
    <body>
        <div class="wrapper">
            <header class="header"></header>
            <main class="main">
            
                <div class="card">
                    <div class="card-body">
                        <p class="card-title">404</p>
                    </div>
                </div>
                
            </main>
            <footer class="footer"></footer>
        </div>
    </body>
</html>

В чем разница в данных подходах? И какой предпочтительный вариант для использования?

html, body {
    min-height: 100%;
    // или
    height: 100%;
    // или
    height: 100vh;
}
css html
Источник: Stack Overflow на русском

Ответы

▲ 1

Теперь понятно, что вы имеете ввиду

min-height: 100%;

Это значит, что минимальная высота блока - 100% от родительского. А так как у body по определению не может быть родительского блока, соответственно это не верно

height: 100%;

Тоже самое, только не минимальная. Опять же 100% непонятно от чего

height: 100vh;

Из предоставленных вами вариантов - этот самый адекватный