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

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

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

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

Код html:

HTML5

<!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

* {
    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

<!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

* {
    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 по бокам не будет красного

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

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

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

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

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

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

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

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

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

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