Как сделать блок на всю высоту?

Question

kot98 @kot98

HTML
CSS

Как сделать блок на всю высоту?

<html>
    <head>...</head>
    <body>
      <div id="app">
        <div class="home">
        ....
        </div>
      </div>
    </body>
...

блок .home у меня занимает высоту контента внутри, тк body и html занимают высоту контента. чтобы растянуть .home на всю высоту нужно задать 100% и html и body, но решение кажется не особо правильным, 100vh тоже. может есть другие способы?

Вопрос задан 11 апр.
126 просмотров

2 комментария

Подписаться 1 Простой 2 комментария

Ankhena @Ankhena Куратор тега CSS

100vh тоже

По какой причине?

Есть еще dvh, svh, ldvh

Написано 11 апр.
ProjectSoft @ProjectSoft
kot98, если внимательно вчитаться в вопрос, то вы вообще отказываетесь от задания высот. Имхо.
Задать минимальную высоту. Т. е. Если контента будет больше, то блок растянется больше высоты экрана. И не задавать жёсткую высоту блока, чтобы у вас не получилось наложения (это не всегда бывает, но возможно).
Т. е.

.home { min-height: 100vh; }

будет достаточно для растяжения на всю высоту экрана.
Написано 12 апр.

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 13 часов назад
- 89 просмотров
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 22 часа назад
- 78 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 90 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- вчера
- 87 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- вчера
- 72 просмотра
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- вчера
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- вчера
- 60 просмотров
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 95 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 76 просмотров
2

ответа
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 21 нояб.
- 35 просмотров
0

ответов
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Обновить дизайн карты метро Москвы

24 нояб. 2024, в 13:04

500 руб./в час

Сделать сайт на Tilda

24 нояб. 2024, в 12:29

3000 руб./за проект

Сделать 5 видеобэкграундов для выступления детей

24 нояб. 2024, в 12:25

500 руб./за проект

100vh тоже

По какой причине?

Есть еще dvh, svh, ldvh
kot98, если внимательно вчитаться в вопрос, то вы вообще отказываетесь от задания высот. Имхо.
Задать минимальную высоту. Т. е. Если контента будет больше, то блок растянется больше высоты экрана. И не задавать жёсткую высоту блока, чтобы у вас не получилось наложения (это не всегда бывает, но возможно).
Т. е.

.home { min-height: 100vh; }

будет достаточно для растяжения на всю высоту экрана.

Answer 1 · 2024-04-16 15:43:12

Азиз Таджитдинов @atmtab

Начинающий Frontend разработчик

идеальный вариант это

.app {
height: 100vh;
max-height: 100vh
}

Ответ написан 16 апр.

Комментировать

Как сделать блок на всю высоту?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт