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

Question

Артем Колчин @html_student

Молодой и глупый.

CSS

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

Подскажите, есть 3 блока, нужно чтоб картинка посередине была резиновая по высоте, чтоб сайт был без скролла и всё влазило в один экран, думаю резиновый сделать за счет высоты картинки, ширина ее не обязательно должна быть 100%.

Сделал общий блок 100vh, по сути он по высоте как надо, тогда футер и хедер не видно тогда.

Вопрос задан 25 дек. 2023
75 просмотров

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

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

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

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

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

Артем Колчин @html_student Автор вопроса

Пробовал так, не работает.

Написано 25 дек. 2023

UthvfyV @UthvfyV

<html>

<title>site</title>
<style>.wrapper {
      min-height: 100%;
    display: block;  
height:auto;
}
/* если .wrapper должно быть мин. высоты 100%, тогда да, min-height: 100%;. Но если задаться целью сделать резиновый wrapper, тогда просто, height:auto;, без min-height. Если фотка меньше чем высота экрана, тогда всё влезет. Если больше, тогда падо для неё ставить ограничение по высоте. И зачем ставить vh, height:100vh;, оно ни к чему, в % или px, vh в конечном результате никакой роли не сыграет. Вернее сыграет, но можно обходится и % px. vh мало где используется. А если используется то так надо. А просто лепить где прийдётся vh не надо. Для этого есть % и px. Что не так? Почему не получается? Если это надо вставить на сайт, тогда смотрите другие блоки и стили. Что мешает. Если же просто без сайта, тогда не понятно почему не выходит. Если просто, то не должно не выходить.*/
.header {
  width:100%;
  height:100px;
  background:red;display: block;
}
.content {
  display: block;
  height:auto;
}
.content img{
width:auto;
max-width: 100%;
  height:auto;
  display: block;
}
.footer {
  width:100%;
  height:100px;display: block;
  background:green;
}</style>

<div class="wrapper">
  <div class="header"></div>
    <div class="content">
      <img src="https://w.forfun.com/fetch/71/71f0c755f4b257fb9987c25743d16388.jpeg">
    </div>
    <div class="footer"></div>
</div>

А такой вопрос. Как вы делаете блок "Посмотреть результат", отдельео css,отдельно html, js. Я пробывал по всякому, не пойму как вы это делаете.

Написано 25 дек. 2023

Артем Колчин @html_student Автор вопроса

UthvfyV, просто вставляю через frame codepen
вот ваше решение, оно не работает.
snippet

Написано 25 дек. 2023

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

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

Войти через центр авторизации

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

HTML

+1 ещё

Простой
Как сделать так, чтобы содержимое defs работало?
- 1 подписчик
- 2 часа назад
- 24 просмотра
0

ответов
CSS

Простой
Как удалить все префиксы из css?
- 1 подписчик
- 8 часов назад
- 61 просмотр
1

ответ
HTML

+1 ещё

Простой
Выровнить картинку по центру в тексте, чтобы не зависимости всегда была по центру?
- нет подписчиков
- 20 часов назад
- 73 просмотра
1

ответ
CSS

Простой
Как создать нормальный размер картинки на php?
- 1 подписчик
- вчера
- 64 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Галерея через сборку строки JS не позиционируется?
- 1 подписчик
- вчера
- 89 просмотров
0

ответов
CSS

Простой
Как сверстать не стандартный макет?
- 1 подписчик
- вчера
- 91 просмотр
2

ответа
HTML

+1 ещё

Простой
Почему схлопываются внешние отступы соседних элементов?
- 1 подписчик
- вчера
- 70 просмотров
0

ответов
CSS

+3 ещё

Простой
Как увеличить QPushButton на 105% через stylesheet?
- 1 подписчик
- 04 мая
- 33 просмотра
1

ответ
HTML

+2 ещё

Простой
Почему моргает видеофон на сайте?
- 1 подписчик
- 03 мая
- 91 просмотр
0

ответов
CSS

Простой
В контейнере шириной 100% при разрешении 320рх кнопка вылазит за его пределы. как поставить ее в правый верхний угол?
- 3 подписчика
- 03 мая
- 483 просмотра
0

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

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

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

React разработчик

Uptrade

от 150 000 до 200 000 ₽

Разработка скрипта экспорта данных из YCLIENTS

06 мая 2024, в 17:08

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

Разработать Telegram Mini Apps

06 мая 2024, в 17:07

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

Сканер, бот для арбитража криптовалют

06 мая 2024, в 16:48

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

Answer 1 · 2023-12-25 05:38:35

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

Ответ написан 25 дек. 2023

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

Answer 2 · 2023-12-25 12:02:50

<style>.wrapper {
    min-height: 100%;
    display: block;  
  height:100vh;
}</style>

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

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

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

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

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