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

Question

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

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

CSS

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

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

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

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

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

Подписаться 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 ещё

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

ответ
HTML

+1 ещё

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

ответ
HTML

+1 ещё

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

ответов
CSS

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

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- вчера
- 64 просмотра
1

ответ
HTML

+1 ещё

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

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- 20 нояб.
- 100 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 85 просмотров
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 72 просмотра
1

ответ
JavaScript

+2 ещё

Средний
Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?
- 1 подписчик
- 19 нояб.
- 106 просмотров
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

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

от 2 000 до 4 000 $

Необходимо доработать несколько задач

23 нояб. 2024, в 07:32

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

Сделать бэкап сайта(форума) и установить его на сервер

23 нояб. 2024, в 04:31

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

Смонтировать видео

23 нояб. 2024, в 01:31

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

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.

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

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

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

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