Проблема с рамкой у body

[horprogs]

Привет!

Пытаюсь сделать рамку для body, т.е. рамку у всей страницы документа. Мне нужно чтобы она имела отступ в 15px от края, причем содержимое страницы обрезаться не должно. Если я указываю у body свойства border и padding, то содержимое соответственно обрезается по краям. 

Добавлял новый тег в начале страницы, рамка отображается как нужно, но из-за структуры сайта не могу с позиционировать содержимое поверх этого нового блока.

Какие есть способы добавления такой рамки к странице?

 

http://s010.radikal.ru/i312/1508/f7/742465e57832.png

 

Спасибо

[prophet_07]

Так вам нужно: http://jsfiddle.net/22699nuh/1/

[afdw]

Попробуйте вместо padding использовать margin.

[horprogs]

Нет, так тоже не получится, содержимое сдвинется от краев. Пробовал играться с outline и box-shadow, но тоже пока не смог прийти к нужному результату

[mrnobody]

Может  добавить:

box-sizing: border-box;

Вы бы выложили код в песочницу, а то так сложно понять, что не так.

 

Вы так имели ввиду — http://jsbin.com/hulizaxiqo/edit?html,css,output ?

Edited August 30, 2015 by mrnobody

[horprogs]

Вот примерно такая структура у меня: http://jsfiddle.net/horprogs/j9w37e1w/

Я бы хотел, чтобы изображения не отступали от границ экрана, а рамка была поверх них. Я думаю бордером у body так не сделать, потому что смещение содержимого все равно произойдет. Добавил пустой блок и указал у него рамку, нехорошее только это решение, т.к. приходится высоту вручную задавать http://jsfiddle.net/horprogs/fp9hL7fu/

Edited August 31, 2015 by horprogs

[horprogs]

То, что нужно! Всем спасибо

[horprogs]

Хм, ну вот кстати есть с этим вариантом проблемка одна:

рамка перекрывает содержимое, если это текст внутри, то ему можно присвоить z-index побольше, а если цельный див (например карта интерактивная, с которой нужно взаимодействовать), то рамка ее перекрывает, если у картинки поставить z-index больше, то она перекроет рамку. Тупиковая ситуация с рамками этими)) http://jsfiddle.net/22699nuh/3/

[mrnobody]

Можно добавить псевдоэлементу pointer-events: none; http://jsfiddle.net/mrnobody/22699nuh/4/

Только поддержка в IE хромает: http://caniuse.com/#feat=pointer-events

 

Или можно еще сделать верхнюю и нижнюю рамку html:before, html:after {…}, а левую и правую с помощью body:before, body:after {…}

http://jsfiddle.net/mrnobody/22699nuh/5/

Edited September 7, 2015 by mrnobody

[horprogs]

Спасибо! pointer-events работает. Второй вариант тоже хорош, но у меня скролл по экранам и работает все довольно странно, не как нужно. Оставлю пока первый вариант, для кроссбраузерности может буду убирать рамку на старых IE