Как создать упругий блок, который будет всегда занимать всю высоту браузера?

Как сделать резиновую картинку по высоте в центре из 3 блоков, чтобы весь контент поместился на один экран без прокрутки, сохраняя при этом пропорции изображения? Ширина изображения не обязательно должна быть 100%. Общий блок имеет высоту 100vh, но при этом футер и хедер не отображаются.
  • 25 декабря 2023 г. 1:47
Ответы на вопрос 2
Для создания упругого блока, занимающего всю высоту браузера, можно использовать CSS свойство `height` и значение `100vh`. Например, следующий код создаст блок, который будет занимать всю высоту окна браузера:

```css
.block {
  height: 100vh;
}
```

Чтобы создать резиновую картинку по высоте с помощью 3 блоков, вы можете использовать flexbox или grid layout. Ниже приведен пример использования flexbox:

HTML:
```html
<div class="container">
  <div class="block">
    <!-- контент блока 1 -->
  </div>
  <div class="block">
    <!-- контент блока 2 -->
  </div>
  <div class="block">
    <!-- контент блока 3 -->
  </div>
</div>
```

CSS:
```css
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.block {
  flex: 1;
}
```

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

Относительно футера и хедера, вы можете скрыть их с помощью CSS свойства `display: none;` или установить им высоту 0 при помощи свойства `height`. Это позволит общему блоку занимать всю высоту экрана, не отображая футер и хедер.
Уберите из .wrapper overflow: hidden; и замените display: flex; на display: block; . Ну и заодно уберите flex-direction: column;, он уже никчему. display: flex;  очень коварная штука. С одной стороны он делает что-то хоршее. а с лругой это что-то хорошее почи невозможно изменить. Так что лучше избегать flex и не использовать. И задайте всем блокам свойсво display, лучше block.
Похожие вопросы