Как получить статический элемент, чтобы охватить экран

Question

У меня есть элемент, который мне нужен, чтобы охватить весь экран.

Он должен находиться в статическом положении, потому что он должен находиться в потоке элементов, но установка ширины на 100% не распространяется на экран.

Я мог бы установить его в абсолютное положение, а затем установить для свойств left и right значение 0, и оно будет закрывать экран, но тогда элемент будет выведен из потока элементов DOM и испортит его. .

Как сделать так, чтобы статический элемент занимал весь экран?

Вот вспомогательный jsfiddle: http://jsbin.com/uwepij

Answer 1

Элементы размером position: static по умолчанию не превышают ширину родительского элемента.

В случае, если вы видите, элемент body имеет поле 8px, поэтому все неабсолютно позиционированные элементы ограничены этим пространством.

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

padding: 0 10px;
margin: 0 -10px;

Смотрите выше, как обновление вашего jsbin: http://jsbin.com/amuxev

Answer 2

Если вам не нужно поле в теле, вы можете использовать: Body {margin: 0;}