НейроАгент

Как сделать div на всю высоту браузера: Полное руководство по CSS

Узнайте, как сделать div, заполняющий всю высоту окна браузера с помощью CSS. Изучите решения с использованием viewport-единиц, flexbox и grid для адаптивных макетов.

#css-grid #css-height #flexbox-layout #responsive-design #two-column-layout #viewport-units

24.10.2025, 13:56

Вопрос

Как сделать div высотой 100% окна браузера

У меня есть макет с двумя колонками - левый div и правый div. У правого div серый цвет фона, и мне нужно, чтобы он растягивался вертикально в зависимости от высоты окна браузера. Сейчас цвет фона заканчивается на последнем элементе контента в этом div. Я пробовал height: 100%;, min-height: 100%; и т.д.

НейроАгент

Чтобы сделать div высотой 100% от высоты окна браузера в двухколоночной компоновке, необходимо использовать единицы viewport или современные методы компоновки CSS. Проблема height: 100% и min-height: 100% заключается в том, что они работают только если родительский контейнер имеет определенную высоту, что элементы <body> и <html> обычно не имеют по умолчанию.

Использование единиц viewport

Самое простое решение — использовать единицы высоты viewport (vh). Для вашего правого div можно установить:

css

.right-div {
    height: 100vh;
    background-color: grey;
}

Однако у этого подхода есть ограничения:

Элемент всегда будет точно высотой viewport, даже если контента больше
Он не работает хорошо, если вы хотите, чтобы элемент расширялся за пределы viewport при наличии большего количества контента

Для большей гибкости используйте min-height вместо этого:

css

.right-div {
    min-height: 100vh;
    background-color: grey;
}

Это гарантирует, что элемент будет как минимум высотой viewport, но может стать выше, если контента больше.

Решение с Flexbox

Flexbox часто является лучшим подходом для двухколоночных компоновок, где вы хотите, чтобы один столбец заполнял доступное пространство:

html

<div class="container">
    <div class="left-column">Левый контент</div>
    <div class="right-column">Правый контент</div>
</div>

css

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
}

.left-column {
    flex: 0 0 200px; /* Фиксированная ширина */
}

.right-column {
    flex: 1; /* Занимает оставшееся пространство */
    background-color: grey;
}

Этот подход автоматически заставляет правый столбец заполнять оставшуюся высоту и ширину контейнера.

Решение с CSS Grid

CSS Grid предоставляет еще один отличный вариант для создания адаптивных компоновок:

css

.container {
    display: grid;
    grid-template-columns: 200px 1fr;
    height: 100vh;
}

.right-column {
    background-color: grey;
}

Grid особенно мощен, потому что он дает вам больше контроля над обоими измерениями и может обрабатывать более сложные компоновки.

Распространенные проблемы и решения

Проблема с высотой родительского контейнера

Если height: 100% не работает, вероятно, потому что родительские контейнеры не имеют определенных высот. Убедитесь, что установили:

css

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

Переполнение контента

Если ваш правый div имеет контент, который переполняется, вы можете контролировать его с помощью:

css

.right-div {
    min-height: 100vh;
    overflow-y: auto; /* Добавляет полосу прокрутки, если контент слишком длинный */
    background-color: grey;
}

Адаптивность для мобильных устройств

Для мобильных устройств, возможно, вы захотите расположить столбцы друг под другом:

css

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    
    .left-column {
        flex: none;
        height: auto;
    }
    
    .right-column {
        min-height: 0;
    }
}

Полные рабочие примеры

Пример 1: Простая двухколоночная компоновка

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Двухколоночная компоновка</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
        }

        .container {
            display: flex;
            height: 100vh;
        }

        .left-column {
            width: 250px;
            background-color: #f0f0f0;
            padding: 20px;
        }

        .right-column {
            flex: 1;
            background-color: grey;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-column">
            <h3>Навигация</h3>
            <ul>
                <li>Главная</li>
                <li>О нас</li>
                <li>Контакты</li>
            </ul>
        </div>
        <div class="right-column">
            <h2>Основной контент</h2>
            <p>Этот контент заполнит доступную высоту окна браузера.</p>
        </div>
    </div>
</body>
</html>

Пример 2: С использованием min-height для компоновок с большим количеством контента

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Комоновка с min-height</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            display: flex;
            min-height: 100vh;
        }

        .left-column {
            width: 200px;
            background-color: #333;
            color: white;
            padding: 20px;
        }

        .right-column {
            flex: 1;
            min-height: 100vh;
            background-color: grey;
            padding: 20px;
        }

        .content-section {
            max-width: 800px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-column">
            <h3>Меню</h3>
            <nav>
                <ul>
                    <li><a href="#">Панель управления</a></li>
                    <li><a href="#">Отчеты</a></li>
                    <li><a href="#">Настройки</a></li>
                </ul>
            </nav>
        </div>
        <div class="right-column">
            <div class="content-section">
                <h1>Панель управления</h1>
                <p>Добро пожаловать на вашу панель управления. Эта компоновка гарантирует, что серый фон будет растянут на полную высоту окна вашего браузера.</p>
                
                <!-- Добавьте больше контента здесь для тестирования -->
                <div style="height: 1000px; background: linear-gradient(to bottom, grey, #ccc); margin-top: 20px;">
                    <p>Прокрутите вниз, чтобы увидеть, как серый фон extends за пределы viewport</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Источники

Заключение

Используйте min-height: 100vh для простых решений, где вы хотите, чтобы div был как минимум высотой viewport
Реализуйте flexbox или CSS Grid для более сложных двухколоночных компоновок, которые автоматически заполняют доступное пространство
Всегда устанавливайте html, body { height: 100%; margin: 0; padding: 0; } для обеспечения правильного наследования высоты
Тестируйте вашу компоновку с разным количеством контента и размерами экрана, чтобы убедиться, что она работает во всех сценариях
Рассмотрите возможность использования overflow-y: auto на ваших div для обработки контента, превышающего высоту viewport

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

Как сделать div 100% высоты родительского контейнера?В чем разница между height: 100% и min-height: 100vh в CSS?Как создать липкий футер, который остается внизу страницы?Как обрабатывать переполнение в div на всю высоту с большим количеством контента?Какие лучшие практики для адаптивных двухколоночных макетов?Как сделать div, который расширяется, чтобы заполнить оставшееся пространство в flexbox?

Спросить у NeuroAgent