фон в полноэкранном режиме с 100vh, но будет больше, если экран свернут по вертикали - PullRequest
Новая
       7

фон в полноэкранном режиме с 100vh, но будет больше, если экран свернут по вертикали

1 голос
/ 05 января 2020

Я хочу, чтобы мой фон был полноэкранным с 100vh, но я также хочу, чтобы, если я свернул экран по вертикали, фон оставался в конце изображения, которое находится на фоне

header {background: # efe0d9; дисплей: встроенный блок; ширина: 100%; плыть налево; высота: 100vh; отступы: 1% 0 0;}

Я хочу иметь фон, который заканчивается в нижней части экрана, потому что изображение на экране становится достаточно большим, но когда я минимизирую экран по вертикали картинки остаются того же размера (как и хотелось), но фон также увеличивается, поэтому картинки пересекаются со следующей частью сайта введите описание изображения здесь

1 Ответ

0 голосов
/ 05 января 2020

Вы пробовали установить минимальная высота ?

Редактировать: Это может быть не совсем то, что вы ищете, так как мне пришлось добавить дополнительный элемент, но вы можете попробовать обернуть <header> в контейнер с его высотой, установленной на 100vh, чтобы содержимое заголовка занимало минимальную высоту, которую вы хотите покрыть, и придавая тот же цвет фона для оболочки и заголовка.

Проверьте фрагмент и переключитесь на полный экран, чтобы увидеть, как фон выходит за пределы содержимого заголовка. 

#container {
background: #efe0d9;
height: 100vh;
}
header {
  background: #efe0d9;
width: 100%;
}
.stack {
height: 100px;
  text-align: center;
}
body, p, hr {
  margin: 0;
}
<div id="container">
<header>
<div class="stack"><hr><p>0px</p></div>
<div class="stack"><hr><p>100px</p></div>
<div class="stack"><hr><p>200px</p></div>
<div class="stack"><hr><p>300px</p></div>
<div class="stack"><hr><p>400px</p></div>
<div class="stack"><hr><p>500px</p></div>
</header>
</div>

Редактировать: Добавление контейнера div с его высотой, установленной на 100vh, с отображением на flex и указанием заголовка min-height, кажется, сделал свое дело. Вот обновленная скрипка.

...