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

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

0 голосов
/ 19 декабря 2011

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

Layout fixed width, full height with fixed footer, full width

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

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

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

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

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

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

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

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

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

Крис

1 Ответ

1 голос
/ 19 декабря 2011

Я создал скрипку с возможным обходным путем, вставив два дополнительных 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/

...