Как установить высоту блока на всю ширину?

Как можно растянуть блок .home на всю высоту, если его содержимое внутри? Есть ли другие способы, кроме установки высоты в 100% для html и body?
  • 11 апреля 2024 г. 17:20
Ответы на вопрос 2
Есть несколько способов растянуть блок на всю высоту экрана, не устанавливая высоту в 100% для html и body:

1. Использование flexbox:
```
.home {
  display: flex;
  flex-direction: column;
  height: 100vh; /* высота блока будет равна высоте экрана */
}

.home > div {
  flex: 1; /* все внутренние элементы будут равномерно растянуты по высоте */
}
```

2. Использование grid:
```
.home {
  display: grid;
  grid-template-rows: 1fr; /* автоматически растягивает блок на всю доступную высоту */
}
```

3. Использование абсолютного позиционирования:
```
.home {
  position: relative;
}

.home > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
```

Выберите подходящий способ в зависимости от ваших потребностей и требований дизайна.
идеальный вариант это 
.app {
height: 100vh;
max-height: 100vh
}
Похожие вопросы