Relow
@Relow
Ничего не умею

Почему у блока с 100% шириной ширина — не 100%?

Есть блок
скриншот
5d062b29b5b52618875801.png

css
.background
	position: absolute
	z-index: -1
	top: 0
	width: 100%
	height: 850px

.transparent
	position: absolute
	width: 100%
	height: 100%
	background: rgba(0,20,50,0.6)

.image
	position: absolute
	width: 100%
	height: 100%
	background: url(../img/main-img.png)
	​​​​​​​background-repeat: no-repeat
	background-position: center center
	background-size: cover

.fog
	position: absolute
	bottom: 0
	width: 100%
	height: 213px
	background: url(../img/fog.png)

HTML
<section class="background">
		<div class="image"></div>
		<div class="transparent"></div>
		<div class="fog"></div>
	</section>

Этот блок находится в body с минимально шириной в 1140px.
Почему-то при уменьшении страницы меньше 1140 пикселей начинает уменьшаться. Почему? Как исправить?
  • Вопрос задан
  • 118 просмотров
Решения вопроса 1
JRK_DV
@JRK_DV
Рецепты https://codepen.io/jrkdv/full/LKLXdq
честно говоря много причин может быть и без песочницы трудно однозначно сказать, но всё же предположение напишу.
viewport (окно) у вас имеет размер 986px
body имеет размер min-width: 1140px;
.background имеет позицию absolute и выноситься в отдельный контекст - тут ключевой момент.
т.к. блоки html и body у вас в другом контексте (в основном), то для блока .background позиция и размеры берутся из параметров viewport браузера.
Итог:
попробуйте для body указать position: relative;
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
squitcher
@squitcher
Верстальщик
явно что-то с кнопкой
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы