Статический нижний колонтитул

Question

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

Я создал диаграмму, чтобы помочь объяснить, http://www.squaresphere.co.uk/images/footer-diagram.png

Так что в идеале мне нужен способ вычисления высоты содержимого и растяжения div содержимого, если content_length> viewport.height, носохраняйте минимальную высоту, если content_length

Решение, использующее html + css, было бы фантастическим, но я начинаю думать, что мне придется сделать какой-нибудь прикольный jQuery onviewportresize иличто-то

Любые предложения будут великолепны, спасибо!

Answer 1

Я бы обманул и заставил нижний колонтитул содержать перекрывающуюся часть. Тогда просто сделайте основной контент расширенным до дна. (В этом случае строки слева и справа.)

Ваш код не требует растяжения - визуальный дисплей имеет иллюзию растяжения при изменении размера браузера - это все, что нужно.

Answer 2

После прочтения вашей диаграммы возможное решение HTML / CSS:

CSS

#footer { position: absolute; z-index:9999; background: url(...) no-repeat top center; height: (height of image); bottom: 0; left: 0; width: 100%; }

HTML

<div id="content"></div>
<div id="footer">This floats above everything else and remains at the bottom of the page.</div>

Попробуйте и дайте мне знать.

Answer 3

Я использовал jQuery height () с большим успехом.Возвращает вычисленную высоту, которую вы можете проверить в событии $ (window) .resize () или $ (document) .resize ().