Я установил стиль в <html>:
html {
background: #ECECEC;
border: 1px solid #FFFFFF;
}
Если содержимое страницы больше, чем страница, почему граница останавливается, но фон продолжает идти?
Вот скрипка, которая показывает проблему: http://jsfiddle.net/rPGyc/3
html - это правильный элемент уровня блока, как и body, p, div и т.д. - поэтому он соблюдает все те же правила переполнения, что и другие элементы блока.
Однако причина, по которой фон html истекает мимо границы, когда контент переполняет его ширину (или когда его ширина меньше 100% окна браузера или окна просмотра), объясняется тем, что цвет фона распространяется на viewport, который представляет собой холст, содержащий html и все его содержимое, которые отображаются. Однако граница остается частью элемента html, поэтому элемент не расширяется при переполнении содержимого. Такое поведение очень похоже на то, как применение фона к body, но не html, заставляет фон тела распространяться на корневой элемент в любом случае, как описано в этом ответе, который ссылается на этот раздел спецификации.
Как Alohci примечания в комментарии в ответе, то же самое относится к html в отношении видового экрана:
Обратите внимание, что html ведет себя относительно области просмотра почти так же, как тело ведет себя по отношению к html, а фон выходит за пределы элемента html. См. http://jsfiddle.net/GmAL4/4/, чтобы понять, что я имею в виду.
Здесь небольшое исправление с использованием jquery
$("html").width($(document).width());
$("html").css("border", "1px solid black");
Я знаю, что это хромает, что только один css не работает нормально, но по крайней мере мы можем получить желаемый результат с jquery.
здесь скрипка: http://jsfiddle.net/rPGyc/5/
Способ предотвращения использования свойства 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;
}