Макет фиксированной ширины, полная высота с фиксированным нижним колонтитулом, полная ширина

Question

Я мог бы использовать некоторую помощь по макету.Вот чего я пытаюсь достичь:

Вот спецификации:

• заголовок имеет фиксированную высоту
• нижний колонтитулвсегда внизу и имеет полную ширину (100%)
• содержимое имеет фиксированную ширину
• содержимое в основном имеет полную высоту минус нижний колонтитул, но перекрывает нижний колонтитул ровно на 20 пикселей

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

Я создал для этого скрипку: http://jsfiddle.net/Sq4Pk/6/

Проблемы с этим решением в настоящее время:

• чем короче область просмотра, тем больше контентаперекрывает нижний колонтитул (должно быть точно 20 пикселей)
• часть содержимого не заполняет область просмотра

Возможно ли это вообще?Может кто-нибудь помочь мне с этим?

Я пробовал эти решения и их варианты, но оба они немного отличаются от моего варианта использования:

• http://peterned.home.xs4all.nl/examples/csslayout1.html
• http://www.cssstickyfooter.com

Большое спасибо за любую помощь!

Крис

Answer 1

Я создал скрипку с возможным обходным путем, вставив два дополнительных div в нижний колонтитул, чтобы подделать оверлей.

Один неприятный недостаток: в Chrome самый высокий div (для маскировки тени) кажется сдвинутым на 1 пиксель послеразмер.FF + IE в порядке.

http://jsfiddle.net/Sq4Pk/3/

EDIT: найдено исправление для сдвига пикселей в Chrome: http://jsfiddle.net/Sq4Pk/4/

EDIT2: или если это вариантиспользуйте jQuery, результат даже немного лучше: http://jsfiddle.net/Sq4Pk/5/