Страница занимает ширину экрана, но не ширину контента, почему?

Question

vetsmen @vetsmen

Страница занимает ширину экрана, но не ширину контента, почему?

Почему body и вложенный в него родительский блок занимают ширину экрана, но не ширину контента? Контент по ширине намного больше, чем ширина экрана, поэтому у родительского блока пропадает фон, а контент продолжает отображаться без фона (на белом не видно просто, но контент там есть).
Как исправить это? Такая проблема только когда появляется горизонтальный скролл и когда я делаю его.

Вопрос задан более трёх лет назад
1392 просмотра

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

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

Andrew @KickeRocK

Без кода сложновато(codepen,jsfiddle и т.п.)

Написано более трёх лет назад

vetsmen @vetsmen Автор вопроса

Andrew,

.header { width: 100%; height: 600px; background: url('./img/screen1_bg.jpg') center no-repeat; background-size: cover; }
.header .header_content { width: 1130px; height: 100%; margin: 0 auto; }
.header .head { overflow: hidden; padding: 40px 0; height: 92px; line-height: 92px; }

<body>
	<div class="main">
		<div class="header">
			<div class="header_content">
<div class="head">
...
</div>
</div>
</div>
</div>
</body>

Написано более трёх лет назад

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

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

1 комментарий

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

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

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

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

HTML

+2 ещё

Простой
Почему нет взаимосвязи между файлами HTML, CSS, JS?
- 1 подписчик
- 15 часов назад
- 126 просмотров
0

ответов
CSS

+1 ещё

Простой
Почему не работает анимация при маленьком окне?
- 1 подписчик
- вчера
- 41 просмотр
1

ответ
HTML

+1 ещё

Простой
Как сделать чтобы в МиниВК приложении ссылки открывались внутри?
- 1 подписчик
- вчера
- 20 просмотров
0

ответов
HTML

+3 ещё

Простой
Почему появляется горизонтальная прокрутка на мобильном (overflow включен)?
- 1 подписчик
- 26 нояб.
- 74 просмотра
1

ответ
HTML

+3 ещё

Простой
Где и как найти переменные локальной игры на html5?
- 1 подписчик
- 25 нояб.
- 81 просмотр
1

ответ
HTML

+1 ещё

Простой
Почему дублируются изображения?
- 1 подписчик
- 25 нояб.
- 80 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 24 нояб.
- 231 просмотр
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 23 нояб.
- 112 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 23 нояб.
- 116 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 131 просмотр
0

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Установить цель из метрики javascript событие на вордпресс

28 нояб. 2024, в 17:06

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

Сделать проект в Blender toon animation (тюншейдер)

28 нояб. 2024, в 16:52

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

Разработать VPN приложение для iOS на Swift

28 нояб. 2024, в 16:21

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

Без кода сложновато(codepen,jsfiddle и т.п.)
Andrew,
.header { width: 100%; height: 600px; background: url('./img/screen1_bg.jpg') center no-repeat; background-size: cover; } .header .header_content { width: 1130px; height: 100%; margin: 0 auto; } .header .head { overflow: hidden; padding: 40px 0; height: 92px; line-height: 92px; }

<body> <div class="main"> <div class="header"> <div class="header_content"> <div class="head"> ... </div> </div> </div> </div> </body>

Answer 1 · 2018-07-16 05:39:41

У фона ширина 100% или 100vw. Но что-то превышает эту ширину экрана и даёт отступ. Фон не может растянуться сверх этого

В общем , исправить так : не давать контенту вылезать за ширину экрана, установив элементу, содержащему контент, ширину в 100%, или max-width : 100%. Но надо смотреть на ваш код. В любом случае горизонтальная полоса прокрутки не должна быть, кроме редких и особых дизайнов

Answer 2 · 2018-07-16 08:32:46

.header .header_content { max-width: 1130px; height: 100%; margin: 0 auto; }

вы указываете конкретную ширину для .header, она превышает ширину области просмотра, либо указывайте максимально доступную ширину свойством max-width: 1130px, до которой будет растягиваться блок, либо срезайте все к фигам overflow: hidden для body =)

Страница занимает ширину экрана, но не ширину контента, почему?

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

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

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