липкий нижний колонтитул css с контейнером содержания высоты 100%.

Question

Я использую эту технику для липкого нижнего колонтитула: http://ryanfait.com/sticky-footer/

Я хотел создать рамку вокруг всего моего сайта, которая также инкапсулирует нижний колонтитул, но обходит всю страницу, но в итоге получилось так:http://i.imgur.com/jy9vN.jpg

Обратите внимание, что белая коробка не перемещается в нижний колонтитул.

Вот jsfiddle, показывающий эту проблему: http://jsfiddle.net/hc3Xu/14/

* IРанее задавал подобный вопрос, не понимая, что это нижний колонтитул, и я получил ответ, в котором говорилось, что это высота: авто! важно;в классе контейнера, который стал причиной того, что контейнер содержимого не растянулся до 100%.Однако удаление этого вызывает проблему, если нижний колонтитул не установлен в нижней части страницы.Поэтому я не могу понять, как поступить.

Answer 1

Вместо:

.container {min-height:100%;  height: auto !important; height:100%;
           margin: 0 auto -30px;  width:980px;
           background:URL(images/bg_sides.jpg) repeat-y #f4f4f4;}

попробуйте что-то вроде:

.container {min-height:100%;  height: auto !important; 
           margin: 0 auto -30px;  width:980px; 
           box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;
           -webkit-box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;
           -moz-box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;}

Затем вам также необходимо настроить левое и верхнее поля нижнего колонтитула, чтобы привести его в соответствие с вашим содержимым contentContainer.

http://jsfiddle.net/z5geM/

Answer 2

http://jsfiddle.net/hc3Xu/16/

Я немного изменил элементы, чтобы фоновое изображение на вашем элементе html и body были главной, центрированной областью содержимого. Придав ему границу и изменив ее размер, он создает эту серую границу вокруг, сохраняя при этом 100% высоты. Небольшое изменение положения нижнего колонтитула, сдвигая его примерно на 20 пикселей, выстраивает его в пределах серой границы тела.

Надеюсь, это поможет, дайте мне знать, если вам нужно более подробное объяснение того, почему это работает.