CSS Sticky Footer - С полями

Я пытаюсь применить этот метод Sticky Footer: http://code.google.com/p/cleanstickyfooter/CSS Sticky Footer - С полями

Он прекрасно работает, однако, у меня есть одна проблема. Для моего сайта у сайта есть 34-кратная маржа в верхней части страницы. Поэтому я попробовал несколько способов его реализации, либо выполнив body {margin-top:34px}, либо выполнив container {margin-top:34px}.

Однако в обоих случаях Sticky Footer перепутался. Когда я пытаюсь компенсировать 34px, он никогда не будет работать.

Любые идеи?

Вот Fiddle пример: http://jsfiddle.net/jrZKb/

источник

2013-04-09 djt

Можете ли вы показать нам свой сайт или пример проблемы с вашим конкретным кодом? –

Мы сможем лучше помочь, если вы сможете опубликовать ссылку на свой сайт или создать скрипку, чтобы продемонстрировать ее. – Arbel

Хорошо, вот скрипка: http://jsfiddle.net/jrZKb/ – djt

Используя Modern Clean CSS Sticky Footer, он работает (на FireFox и IE9):

http://jsfiddle.net/jrZKb/1/

<body> 
    <header> Header</header> 
    <article>Lorem ipsum...</article> 
    <footer></footer> 
</body> 

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin: 0 0 100px; /* bottom = footer height */ 
} 
header 
{ 
    background-color: green; 
} 
footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
    background-color: blue; 
}

источник

2013-04-09 04:54:13 Alyce

Ничего себе это довольно здорово. Я никогда раньше этого не видел. Работает очень хорошо! – djt

Я не видел его ни до тех пор, пока я не поймал его в Google, он выглядит хорошо ... Думаю, я могу обновить свой собственный сайт ... – Alyce

CSS Sticky Footer - С полями

ответ

Смежные вопросы