Как заставить body \ html растягиваться по ширине содержимого вне зависимости от размеров окна?

Question

[Алексей Николаев]

Добрый день.
Есть небольшой пример. В нем, несмотря на то, что серебряный фон занимает 100% ширины, через firebug отчетливо видно, что сами элементы, и html, и body, меньше, чем div.

Это может приводить к проблемам в случае, если задан фон и у html, и у body (сам я так не делаю, но иногда встречается).

Вопрос: можно ли растянуть их по размеру их содержимого, а не по размеру окна? И если нет, почему в данном примере фон заливает весь документ равномерно, несмотря на размер блоков?

Спасибо.

Answer 1

[Pretor DH]

Ваш темный блок DIV лежит как и BODY внутри HTML, и нижний скрол появляется у HTML. По тому и фон серый. Потому что вы скролите HTML. :D

Задом на перед на коня не садитесь — Разберитесь с блочной моделью.
JS fiddle

Answer 2

[Андрей Чернышев]

Я честно говоря вообще не понял вопроса, но давай попробуем разобраться.

Если я не ошибаюсь, HTML и BODY это обычные блочные элементы.
Проверяем:

window.getComputedStyle(document.querySelector("BODY"), null).getPropertyValue('display')  // "block"
window.getComputedStyle(document.querySelector("HTML"), null).getPropertyValue('display')  // "block"

Всё верно, это блочные элементы. Блочным элементам присуще растягиваться на всю допустимую ширину. Первое, что приходит в голову чтобы это изменить - сделать их строчными. Хотя я бы за такое извращение сломал бы минимум мизинец)