Как стиль div иметь цвет фона для всей ширины содержимого, а не только для ширины дисплея?

У меня есть HTML-страница, которая для этого вопроса выглядит так:

<html>
<head>
<style>
div { width: 100%; }
.success { background-color: #ccffcc; }
</style>
</head>
<body>
<div class="success">
<nobr>This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line.</nobr>
</div>
</body>
</html>

Обратите внимание на "очень длинную строку" и цвет фона этого div.

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

В принципе, я хочу, чтобы мой div вел себя так:

Чтобы иметь заданный цвет фона
Чтобы минимум иметь ту же ширину, что и экран, даже если текст внутри всего несколько слов
Чтобы следовать ширине текста, если он больше ширины экрана
Необязательно (и я знаю, что это действительно другой вопрос, вопрос), если у меня есть более одного такого div, следуя первому, есть способ, чтобы эти два метода автоматически соответствовали ширине самого широкого div?

Это имело какой-то смысл?

Есть ли способ сделать это?

Здесь я установил тестовую страницу, которая, если вы просматриваете это на iPhone, хотя и имеет небольшой шрифт, показывает проблему: http://www.vkarlsen.no/test/test.html

Я видел следующие вопросы, перечисленные как потенциальные дубликаты/предложения SO, вот что я заметил, когда пробовал информацию внутри:

iPad-фон для блоков div, не охватывающих всю ширину экрана

Пробовал предложенный тег <meta ... viewport .../>, не изменил его (он присутствует на тестовой странице прямо сейчас.)
Цвет фона простирается по всей ширине ul

<div> уже являются элементами блока
WebKit не окрашивает фоновый цвет для всей ширины конечного встроенного элемента списка

Пробовал настройку div на display: inline-block;, но это ничего не изменило

Ответ 1

Черная магия:

<style>
body { float:left;}
.success { background-color: #ccffcc;}
</style>

Если у кого есть четкое объяснение, почему это работает, прокомментируйте. Я думаю, что это имеет какое-то отношение к побочному эффекту поплавка, который устраняет ограничение, которое тело должно вписывать в ширину страницы.

Ответ 2

Проблема заключается в том, что элементы block масштабируются только до 100% их содержащего элемента, независимо от того, насколько велик их контент - он просто переполняется. Однако, если их элементы inline-block, по-видимому, изменяют их ширину до их фактического содержания.

HTML:

<div id="container">
    <div class="wide">
        foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
    </div>
    <div class="wide">
        bar
    </div>
</div>

CSS

.wide { min-width: 100%; display: inline-block; background-color: yellow; }
#container { display: inline-block; }

(Элемент container обращается к вашему последующему вопросу, чтобы сделать второй div размером с предыдущий, а не только ширину экрана.)

Я также установил скрипт JS, показывающий мой демонстрационный код.

Если вы столкнулись с какими-либо проблемами (особенно проблемы с перекрестным браузером) с inline-block, глядя на Элементы уровня блока внутри дисплея: встроенный блок может помочь.

Ответ 3

.success { background-color: #cffccc; overflow: scroll; min-width: 100%; }

Вы можете попробовать scroll или auto.

Ответ 4

Стиль отображения inline-block, кажется, делает то, что вы хотите. Обратите внимание, что тег <nobr> устарел и не должен использоваться. Непрерывное свободное пространство можно выполнить в CSS. Здесь, как бы я изменил ваши правила стиля примера:

div { display: inline-block; white-space: nowrap; }
.success { background-color: #ccffcc; }

Измените таблицу стилей, удалите теги <nobr> из своего источника и попробуйте. Обратите внимание, что display: inline-block не работает в каждом браузере, хотя в старых браузерах он имеет тенденцию быть проблематичным (более новые версии должны поддерживать его в некоторой степени). Мое личное мнение - игнорировать кодирование для сломанных браузеров. Если ваш код соответствует стандартам, он должен работать во всех основных современных браузерах. Любой, кто все еще использует IE6 (или ранее), заслуживает этой боли.: -)

Ответ 5

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

Также убедитесь, что вы установили min-width:100% для body и html.

Ответ 6

Ширина ограничивается размером тела. Если вы увеличите ширину тела, вы увидите, что он остается на одной линии с цветом фона.

Для поддержания минимальной ширины: min-width: 100%

Ответ 7

Попробуйте это,

.success { background-color: #ccffcc; float:left;}

Ответ 8

или попробуйте это,

.success { background-color: #ccffcc; overflow:auto;}