Странное поведение background

@userook · Регистрация: 24.08.2015

Студворк — интернет-сервис помощи студентам

На сайте сделал блок, который имеет всю длину страницы и имеет фон. Потом внутри сделал еще один с блок, только с фиксированной шириной без заливки, и отцентрировал его. Когда страница вмещается в окно браузера (без нижней полосы прокрутки) то с фоном все нормально, но когда появляется полоса прокрутки(при уменьшении окна браузера, например), фон становится как будто с обрезанным фоном, а хотя должен заполнять 100% фона по ширине.
https://jsfiddle.net/zrpoehb2/

HTML5
1
2
3
4
5
<div class="d1">
<div class="d2">
1111111111111111111111111111111111
</div>
</div>

CSS
1
2
3
4
.d1{ background: #2b2f11;}
.d2{  background: red;  width: 250px;
    margin: 0 auto;
    overflow: hidden;}

@AlexZaw · 30.05.2018, 17:44

При таком коде ширина .d1 у вас 100% и ограничена шириной body, body, в свою очередь, ограничен html, а вот html ограничен областью просмотра.
Вы же, судя по всему, пытаетесь искусственно расширить ширину html/body с помощью чего-то, что выходит за пределы области просмотра.

@userook · 30.05.2018, 19:23 **[ТС]**

Сообщение от AlexZaw

При таком коде ширина .d1 у вас 100% и ограничена шириной body, body, в свою очередь, ограничен html, а вот html ограничен областью просмотра.
Вы же, судя по всему, пытаетесь искусственно расширить ширину html/body с помощью чего-то, что выходит за пределы области просмотра.

Расширить искусственно, это как? Я наоборот уменьшил размер браузера и при скроллинге по горизонтали получается такая штука(обрезок).

@AlexZaw · 30.05.2018, 20:00

Если приведенный код это все что у вас есть на странице, то откуда появляется полоса прокрутки? Просто так, при уменьшении окна скролл не появляется

@userook · 30.05.2018, 20:57 **[ТС]**

https://jsfiddle.net/0170a1sd/

HTML5
1
2
3
4
5
<div class="d1">
<div class="d2">
1111111111111111111111111111111111
</div>
</div>

CSS
1
2
3
4
.d1{ background: #2b2f11;}
.d2{  width: 250px;
    margin: 0 auto;
    overflow: hidden;}

вот уменьшите страницу и выделите текст и увидите что фон пустой становится. И там уж точно не может появится "резиновый блок" т.к второй блок задан с шириной, ту по сути будит полоса прокрутки(ну или можно выделением текста прокрутить) факт в том, что по сути блок д1 имеет ширину 100% и по сути должен заполнять фоном все, оно так и есть до того момента пока не будет уменьшено окно браузера. ПОтом если уменьшить и прокрутить в права то будет фон обрезан. на ту ширину на которую был свернуто(уменьшено) окно браузера

@AlexZaw · 30.05.2018, 21:21

Понятно, происходит ровно тоже самое что описано выше, .d1 занимает 100% ширины области просмотра, а вот блок с текстом не влазит в область просмотра поэтому появляется скролл. Попробуйте задайть border разных цветов для body и html, и вы увидите что все что выходит за область просмотра не является ни тем ни другим, а ваш .d1 растянут на 100%.

@Freeze_Breeze · 30.05.2018, 22:04

userook,
просто блоку

HTML5
1
<div class="d2">

поменяйте значение, c 250px на 50%;

@userook · 30.05.2018, 22:06 **[ТС]**

Сообщение от Freeze_Breeze

поменяйте значение, c 250px на 50%;

а зачем мне 50%? мне нужно фиксированной ширины

@AlexZaw · 30.05.2018, 22:13

Скажите, что нужно получить в итоге? Почему так происходит я уже объяснил, но проблемы это, я так понимаю, не решило.

@Freeze_Breeze · 30.05.2018, 22:15

userook, проверил у себя, все отлично отображается, все растягивается как положено , от куда у Вас взялся скролл я без понятия. Может Вы не весь код написали, а что то скрыли?
Не хотите 50%, напишите 100% только для блока .d1 и тогда он растянется на всю ширину.

@AlexZaw · 30.05.2018, 22:27

По этой ссылке, если уменьшать окно просмотра до тех пор пока текст не начнет влазить в экран, появляется горизонтальный скролл (что логично, так как задана фиксированная ширина, а размер окна становится меньше), а фон .d1 не распространяется за пределы области просмотра при скролле, что опять же логично, так как размеры для html/body или другого контейнера не заданы, следловательно они ограничены областью просмотра. В чем легко убедится задав бордер для хтмл и боди. Надеюсь ТС все-таки объяснит чего он хочет добиться чтобы можно было решить проблему

@userook · 30.05.2018, 22:54 **[ТС]**

https://jsfiddle.net/2tx4g1h5/ вот добавил border для html and body, что бы было понятней

HTML5
1
2
3
4
5
<div class="d1">
<div class="d2">
1111111111111111111111111111111111
</div>
</div>

CSS
1
2
3
4
5
6
html {border: 3px solid red;}
body {border: 3px solid orange;}
.d1{ background: #2b2f11;}
.d2{  width: 250px;
    margin: 0 auto;
    overflow: hidden;}

Название: t2.PNG
Просмотров: 15

Размер: 6.2 Кб

Комментарий модератора

Коды программ должны находиться на форуме! (Правила п.4.11)

@Freeze_Breeze · 30.05.2018, 23:03

userook,

Сообщение от userook

вот добавил border для html and body, что бы было понятней

Это Вам для Вас сказали добавить, а не для нас.
Ну, окей. Вы его задали и что дальше собираетесь делать? Вы точно весь код нам сбросили или что то утаили? Вы понимаете, что содержимое контейнера не помещается в блоке при уменьшении ширины монитора, а резиновые параметры для текста или блока Вы не задали и соответственно содержимое контейнера будет выталкиваться, так как он == 250px и текст остается статичным. По этому он у Вас и будет вылазить за пределы контейнера, понимаете? А что Вы хотите получить в итоге? Какого результата хотите добиться?

@AlexZaw · 30.05.2018, 23:15

Сообщение от userook

вот добавил border для html and body, что бы было понятней

Эммм, Freeze_Breeze, уже сказал, что бордер нужен не нам, а вам, чтобы убедится в том что .d1 растянут на 100% ширины документа, а то, что появляется при скролле, уже выходит за его границы... Видели мультик "Ну-погоди!"? Ту серию где волку зажало голову в автобусе? Вот автобус это html, а волк это ваш .d2, та часть которая не поместилась в html торчит на улице, и хоть является частью целого, но выходит за границы автобуса...
Вам нужно либо растянуть автобус, либо уменьшить волка, так чтобы он целиком помещался внутри автобуса.

@Freeze_Breeze · 30.05.2018, 23:19

AlexZaw,

Сообщение от AlexZaw

Видели мультик "Ну-погоди!"?

ахаххахаххах так еще ни кто не объяснял

@userook · 30.05.2018, 23:19 **[ТС]**

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

@userook · 30.05.2018, 23:25 **[ТС]**

Ок, покажи на живом примере, так сказать...

@Freeze_Breeze · 30.05.2018, 23:37

userook, Господи, что же Вы все такие конспираторы. Будто Вы сайт пишите для Майкрософта и не хотите что бы конкуренты из Apple раньше просекли Ваш невероятный дизайн и выдали его за свой... Ребята астанавитесь!

Сообщение от userook

Хочу, что бы если пользователь смотреть сайт в оконном режиме, крч не на полный экран

У меня уже мозги вскипели после трех буквы "крч".
Пользователь смотрит Ваш сайт (который Вы пишите корпорации Майкрософт) и если этот сайт будет не на весь экран, монитор, то у пользователя появится полоса прокрутки, внизу, так как сайт не резиновый. На подобии этого форума. Тут понятно.

Сообщение от userook

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

Не, прости друг, но тут у меня случился Fatal ERROR.
Я просто не понимаю, что ты хочешь.

Добавлено через 2 минуты
Вам книжки нужно читать и писать научится, а не сайты они закрывают белыми квадратиками...

Не по теме:

mrtoxas, я прошу прощения, но то ли я дурак, то ли лыжи не едут...

@AlexZaw · 30.05.2018, 23:42

Сообщение от userook

.к сайт не "резиновый"

Сайт у вас какой ширины будет? Вот и задайте эту ширину для body, тогда ваш .d1 растянется до этой ширины

@userook · 30.05.2018, 23:47 **[ТС]**

Да нет, прост я уже не знаю как объяснить людям. Решил по тупому, думал поймут. А замазываю я для того, что бы не отвлекать внимание на текст, Fatal ERROR номер 2 не нужен мне))). Нам ничего секретного нету, обычное меню 2 верхних и 1 слева. "КРЧ", не знаю можно ли тут давать ссылки на сторонние ресурсы, но я дам т.к уже не знаю как объяснить.

Добавлено через 3 минуты

Сообщение от AlexZaw

Сайт у вас какой ширины будет? Вот и задайте эту ширину для body, тогда ваш .d1 растянется до этой ширины

если я задам ширину body у меня не получится фон меню на всю ширину задать. Вы наверное не смотрели мои последние скрины.

https: //ru.stackoverflow . com/questions/659821/%D0%9E%D1%82%D1%81%D1%82%D1%83%D0%BF-%D1%81%D0%BF%D1%80%D0%B0%D0%B2%D0%B0-%D0%BF%D1%80%D0%B8-%D1%83%D0%BC%D0%B5%D0%BD%D1%8C%D1%88%D0% B5%D0%BD%D0%B8%D0%B8-%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D1%8B-%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,094
	30.05.2018, 17:44
	При таком коде ширина .d1 у вас 100% и ограничена шириной body, body, в свою очередь, ограничен html, а вот html ограничен областью просмотра. Вы же, судя по всему, пытаетесь искусственно расширить ширину html/body с помощью чего-то, что выходит за пределы области просмотра. 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,094
	30.05.2018, 20:00
	Если приведенный код это все что у вас есть на странице, то откуда появляется полоса прокрутки? Просто так, при уменьшении окна скролл не появляется 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,094
	30.05.2018, 21:21
	Понятно, происходит ровно тоже самое что описано выше, .d1 занимает 100% ширины области просмотра, а вот блок с текстом не влазит в область просмотра поэтому появляется скролл. Попробуйте задайть border разных цветов для body и html, и вы увидите что все что выходит за область просмотра не является ни тем ни другим, а ваш .d1 растянут на 100%. 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,094
	30.05.2018, 22:13
	Скажите, что нужно получить в итоге? Почему так происходит я уже объяснил, но проблемы это, я так понимаю, не решило. 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	30.05.2018, 22:15
	userook, проверил у себя, все отлично отображается, все растягивается как положено , от куда у Вас взялся скролл я без понятия. Может Вы не весь код написали, а что то скрыли? Не хотите 50%, напишите 100% только для блока .d1 и тогда он растянется на всю ширину. 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,094
	30.05.2018, 22:27
	По этой ссылке, если уменьшать окно просмотра до тех пор пока текст не начнет влазить в экран, появляется горизонтальный скролл (что логично, так как задана фиксированная ширина, а размер окна становится меньше), а фон .d1 не распространяется за пределы области просмотра при скролле, что опять же логично, так как размеры для html/body или другого контейнера не заданы, следловательно они ограничены областью просмотра. В чем легко убедится задав бордер для хтмл и боди. Надеюсь ТС все-таки объяснит чего он хочет добиться чтобы можно было решить проблему 0

@userook 5 / 5 / 2 Регистрация: 24.08.2015 Сообщений: 302
	30.05.2018, 23:19 [ТС]
	Хочу, что бы если пользователь смотреть сайт в оконном режиме, крч не на полный экран, у него будет полоса прокрутки внизу т.к сайт не "резиновый" ну типо как этот форум. Так вот я хочу чтобы фон при прокрутки был на всю ширину , а в данный момент окно браузера уменьшить, то если передвинуть(проскролить) вправо, тогда весь фон как бы обрезался. 0

@userook 5 / 5 / 2 Регистрация: 24.08.2015 Сообщений: 302
	30.05.2018, 23:25 [ТС]
	Ок, покажи на живом примере, так сказать... 0