<html> ширина меньше его фона

Я установил стиль в <html>:

html {
    background: #ECECEC;
    border: 1px solid #FFFFFF;
}

Если содержимое страницы больше, чем страница, почему граница останавливается, но фон продолжает идти?

Вот скрипка, которая показывает проблему: http://jsfiddle.net/rPGyc/3

Ответы

Ответ 1

html - это правильный элемент уровня блока, как и body, p, div и т.д. - поэтому он соблюдает все те же правила переполнения, что и другие элементы блока.

Однако причина, по которой фон html истекает мимо границы, когда контент переполняет его ширину (или когда его ширина меньше 100% окна браузера или окна просмотра), объясняется тем, что цвет фона распространяется на viewport, который представляет собой холст, содержащий html и все его содержимое, которые отображаются. Однако граница остается частью элемента html, поэтому элемент не расширяется при переполнении содержимого. Такое поведение очень похоже на то, как применение фона к body, но не html, заставляет фон тела распространяться на корневой элемент в любом случае, как описано в этом ответе, который ссылается на этот раздел спецификации.

Как Alohci примечания в комментарии в ответе, то же самое относится к html в отношении видового экрана:

Обратите внимание, что html ведет себя относительно области просмотра почти так же, как тело ведет себя по отношению к html, а фон выходит за пределы элемента html. См. http://jsfiddle.net/GmAL4/4/, чтобы понять, что я имею в виду.

Ответ 2

Здесь небольшое исправление с использованием jquery

 $("html").width($(document).width());
 $("html").css("border", "1px solid black");

Я знаю, что это хромает, что только один css не работает нормально, но по крайней мере мы можем получить желаемый результат с jquery.

здесь скрипка: http://jsfiddle.net/rPGyc/5/

Ответ 3

Способ предотвращения использования свойства css3 word-wrap. Jsfiddle здесь

Просто добавьте:

html{
background-color: lightgrey;
border: 1px solid #fff;
padding:0px;
margin:0px;
width:100%;
height:100%;
/*The important bit*/
word-wrap: break-word;
}