Содержимое div'a не отображается за полосой прокрутки

@alex71891 · Регистрация: 05.11.2013

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

Здравствуйте. Такая проблема: есть div шириной 100% (фон красный), в нём другой div шириной 1200px(другой фон). При сжатии окна появляется полоса прокуртки. Её прокручиваешь, а цвет фона div'a, у которого ширина в процентах - (фон красный) фон не полностью отображается красным. Как исправить?

Код html:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="style.css" rel="stylesheet" type="text/css"/>
        <title>авторизация</title>
    </head>
 
    <body>
        <div id="line">
            <div id="content">
                Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является 
                стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник 
                создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. 
                Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. 
                Его популяризации в новое время послужили публикация 
                листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной 
                вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
            </div>
        </div>
    </body>
</html>

Код css:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
* {
    margin: 0;
    padding: 0;
    outline: none;
}
 
body {
    background: #444;
    color: #eee;
    display:block;
    font-size: 14px;
}
 
#line {
    width: 100%;
    background: red;
    margin: auto;
}
 
#content {
    background: blue;
    width: 1200px;
    margin: auto;
}

@alc0 · 16.03.2016, 15:54

не очень понятна проблема, но возможно из-за margin в #line...уберите его...

Добавлено через 1 минуту
хотя стоп...он не причем...можно примерно показать, что не так...)

Добавлено через 3 минуты
я не понимаю, что не так с красным дивом, так как он выступает в роли фона, то он скрывается, когда уменьшаешь блок до прокрутки, из-за синего блока)

@Kraken73 · 16.03.2016, 16:23

Когда размер окна становится < 1200px красного фона и не будет, т.к. ты задал фон у дочернего div, который и равен 1200px

@alex71891 · 16.03.2016, 16:31 **[ТС]**

извините, ввёл в заблуждение, в последний момент прописал синий фон.... Он не нужен.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="style.css" rel="stylesheet" type="text/css"/>
        <title>авторизация</title>
    </head>
 
    <body>
        <div id="line">
            <div id="content">
                Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является 
                стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник 
                создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. 
                Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. 
                Его популяризации в новое время послужили публикация 
                листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной 
                вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
            </div>
        </div>
    </body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
* {
    margin: 0;
    padding: 0;
    outline: none;
}
 
body {
    background: #444;
    color: #eee;
    display:block;
    font-size: 14px;
}
 
#line {
    width: 100%;
    background: red;
    margin: auto;
}
 
#content {
    width: 1200px;
    margin: auto;
}

@alc0 · 16.03.2016, 16:44

overflow:hidden попробуй
почему у меня такой фигни нет)))

@alex71891 · 16.03.2016, 16:48 **[ТС]**

с hidden не интересно

полоса прокрутки исчезает. Оно как появляется - если в полном окне всё нормально, если начать окно браузера сжимать по краям (до появления полосы прокрутки) - то баг появляется при прокрутке ползунка вправо.

@alc0 · 16.03.2016, 16:56

display сделай) для контента

Добавлено через 52 секунды
и будет переносится на новую строку)))

@alex71891 · 16.03.2016, 16:57 **[ТС]**

это т.е. как?

@alc0 · 16.03.2016, 16:58

ну то есть скролла не будет) display:inline; ))

@alex71891 · 16.03.2016, 17:23 **[ТС]**

попробовал, текст начинает отображаться не в content, а начинает плыть в по всему line

@alc0 · 16.03.2016, 17:46

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

Добавлено через 4 минуты
просто установка ширины блока line 100% - он подстраивается под экран.. а блок с текстом просто вылазит из блока line, так как ширина фиксированная, поэтому там нету красного цвета...все просто

@Kraken73 · 17.03.2016, 10:54

если ты хочешь чтобы полностью был красный, то 2 варианта
1) Задать цвет блоку с 1200px, И еще который в процентах
2) Просто задать цвет блоку с 1200px, но тогда если экран>1200px по бокам не будет красного

Новые блоги и статьи Все статьи Все блоги /
Семь 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. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера 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. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .

@alc0 18 / 18 / 13 Регистрация: 15.03.2016 Сообщений: 107
	16.03.2016, 15:54
	не очень понятна проблема, но возможно из-за margin в #line...уберите его... Добавлено через 1 минуту хотя стоп...он не причем...можно примерно показать, что не так...) Добавлено через 3 минуты я не понимаю, что не так с красным дивом, так как он выступает в роли фона, то он скрывается, когда уменьшаешь блок до прокрутки, из-за синего блока) 0

@Kraken73 105 / 93 / 50 Регистрация: 17.09.2015 Сообщений: 612
	16.03.2016, 16:23
	Когда размер окна становится < 1200px красного фона и не будет, т.к. ты задал фон у дочернего div, который и равен 1200px 0

@alc0 18 / 18 / 13 Регистрация: 15.03.2016 Сообщений: 107
	16.03.2016, 16:44
	overflow:hidden попробуй почему у меня такой фигни нет))) 0

@alex71891 0 / 0 / 1 Регистрация: 05.11.2013 Сообщений: 43
	16.03.2016, 16:48 [ТС]
	с hidden не интересно полоса прокрутки исчезает. Оно как появляется - если в полном окне всё нормально, если начать окно браузера сжимать по краям (до появления полосы прокрутки) - то баг появляется при прокрутке ползунка вправо. 0

@alc0 18 / 18 / 13 Регистрация: 15.03.2016 Сообщений: 107
	16.03.2016, 16:56
	display сделай) для контента Добавлено через 52 секунды и будет переносится на новую строку))) 0

@alex71891 0 / 0 / 1 Регистрация: 05.11.2013 Сообщений: 43
	16.03.2016, 16:57 [ТС]
	это т.е. как? 0

@alc0 18 / 18 / 13 Регистрация: 15.03.2016 Сообщений: 107
	16.03.2016, 16:58
	ну то есть скролла не будет) display:inline; )) 0

@alex71891 0 / 0 / 1 Регистрация: 05.11.2013 Сообщений: 43
	16.03.2016, 17:23 [ТС]
	попробовал, текст начинает отображаться не в content, а начинает плыть в по всему line 0

@alc0 18 / 18 / 13 Регистрация: 15.03.2016 Сообщений: 107
	16.03.2016, 17:46
	давай разберемся, чего же ты хочешь добиться??? скажи лучше)) если хочешь, чтобы красный цвет был недостающий, то поставь для контента... Добавлено через 4 минуты просто установка ширины блока line 100% - он подстраивается под экран.. а блок с текстом просто вылазит из блока line, так как ширина фиксированная, поэтому там нету красного цвета...все просто 0

@Kraken73 105 / 93 / 50 Регистрация: 17.09.2015 Сообщений: 612
	17.03.2016, 10:54
	если ты хочешь чтобы полностью был красный, то 2 варианта 1) Задать цвет блоку с 1200px, И еще который в процентах 2) Просто задать цвет блоку с 1200px, но тогда если экран>1200px по бокам не будет красного 0