Истинный липкий нижний колонтитул с фиксированным заголовком?

Прежде всего, пожалуйста, прочитайте весь этот вопрос, чтобы вы могли полностью понять, что я ищу, спасибо!

Это вопрос, который я пытался исследовать в течение прекрасного времени, и поставил меня в тупик. Могу ли я иметь настоящий липкий нижний колонтитул с фиксированным заголовком?

Как я могу реализовать липкий нижний колонтитул с фиксированным заголовком? Я не могу добавить отступы или поля в тело или содержимое, так как это сломает нижний колонтитул. Кроме того, я хочу иметь возможность использовать width:100% и height: 100% внутри моего контента без его переполнения и создания беспорядка.

Вот то, к чему я стремился (пожалуйста, извините мои большие навыки Photoshop):

введите описание изображения здесь

Это хорошо выглядит, когда я использую position:fixed; и bottom:0; на моем нижнем колонтитуле. Но чтобы сделать его действительно липким, мне нужно добавить некоторые CSS на мою страницу. (от: http://css-tricks.com/snippets/css/sticky-footer/ )

 * { margin: 0; } html, body { height: 100%; } .page-wrap { min-height: 100%; /* equal to footer height */ margin-bottom: -142px; } .page-wrap:after { content: ""; display: block; } .site-footer, .page-wrap:after { /* .push must be the same height as footer */ height: 142px; } .site-footer { background: orange; } 

Это позволяет мне иметь красивый липкий нижний колонтитул, но вот проблема. Часть содержимого находится под моей фиксированной навигационной панелью.

Я не могу добавить дополнение или маржу к телу, html, или к контенту, потому что это сделает липкий нижний колонтитул бесполезным. Есть ли способ сделать это без CSS «Hacks»?

Это связано с содержимым под заголовком: http://jsfiddle.net/g2ydV/3/

Выглядит хорошо, но часть содержимого скрыта под заголовком? Давайте исправим это, добавив маржу к контенту: http://jsfiddle.net/g2ydV/2/

Вышеприведенный пример работает, НО нижний колонтитул испорчен. Как я могу достичь этого эффекта, не испортив свой липкий нижний колонтитул?

Одним из возможных решений является своп вашего content:after content:before .

Рабочая демонстрация

CSS:

 /* .content:after { content: ""; display: block; } */ .content:before { content: ""; display: block; height: 45px; } 

Есть альтернативный способ сделать это, используя display: table; и display: table-cell которая, кажется, становится все более популярной.

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

HTML

 

Content Here ... part of this is under the header, i need to see all of it without messing up the sticky footer

CSS

 html, body { height: 100%; } body { margin: 0; } #wrap { display: table; width: 100%; height: 100%; min-height: 100%; } #wrap-inner { vertical-align: middle; /* optional for positioning content in the middle */ display: table-cell; } .navbar, .footer { position: fixed; width: 100%; } .navbar { top: 0; width: 100%; } .footer { bottom: 0; } 

демонстрация

это мое решение для фиксированного заголовка

 html { position: relative; min-height: 100%; } #main-container { padding-top: 55px; /* this is header height */ } footer { position: absolute; bottom: 0; width: 100%; }