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

Question

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

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

CSS

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

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

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

Вопрос задан более года назад
79 просмотров

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

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

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

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

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

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

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

Написано более года назад

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. Я пробывал по всякому, не пойму как вы это делаете.

Написано более года назад

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

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

Написано более года назад

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

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

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

HTML

+1 ещё

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

ответ
HTML

+1 ещё

Простой
Как внизу блока сделать маску волной и поместить туда изображение?
- 2 подписчика
- вчера
- 143 просмотра
2

ответа
CSS

+1 ещё

Средний
Веб форма: появилось свойство blur, как исправить на битриксе УС?
- 1 подписчик
- вчера
- 53 просмотра
0

ответов
JavaScript

+3 ещё

Простой
Как отключить swiper-bundle.min.css?
- 1 подписчик
- вчера
- 57 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Мулти селект Dropdown. Как можно создать многослойный мулти селект?
- 1 подписчик
- 24 дек.
- 86 просмотров
1

ответ
CSS

Средний
Возможен ли отступ только второй строки CSS clamp?
- 1 подписчик
- 23 дек.
- 75 просмотров
1

ответ
HTML

+1 ещё

Простой
Как сделать блок такой же формы?
- 1 подписчик
- 23 дек.
- 142 просмотра
1

ответ
HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 23 дек.
- 131 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 22 дек.
- 126 просмотров
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- 22 дек.
- 99 просмотров
0

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

Верстальщик HTML

MST

от 450 $

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Нарисовать арты

26 дек. 2024, в 23:03

500 руб./в час

Парсер Криптография. Работа с TLS-fingerprint

26 дек. 2024, в 21:50

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

Автоматизация ChatGPT и постинга

26 дек. 2024, в 21:01

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

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

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

frontend developer

Ответ написан более года назад

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.

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

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

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

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