Новый «скрытый нижний колонтитул» работает, но все равно перекрывает содержимое в нижней части экрана - PullRequest
0 голосов
/ 22 июня 2010

Я занимаюсь проектированием http://www.vanessacaroline.com и нуждаюсь в небольшой помощи CSS. Если текущее разрешение экрана не делает проблему очевидной, попробуйте изменить размер окна таким образом, чтобы образец 2-колоночного макета выдвинул нижний колонтитул - это проще всего продемонстрировать, взяв нижний край окна браузера, и перетаскивая вверх.

Брутто, верно? Мало того, что контент не толкает нижний колонтитул, как это должно быть, но страница даже не создает полосу прокрутки.

Если вы масштабируете окно по горизонтали, 2-й всплывающий столбец div падает вниз и заливает нижний колонтитул.

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

Я пытался сделать относительно текучую схему ; Я использовал эту ссылку: http://ryanfait.com/sticky-footer/ для кода нижнего колонтитула. Я видел несколько других способов в сети, но я пошел с этим - я хочу нормальное поведение содержимого / полосы прокрутки, с нижним колонтитулом, всегда прикрепленным к нижней части страницы; кто-нибудь может помочь?

Спасибо!

Редактировать: Я обновил сайт первым предложением - ясно: как в #push, так и в позиции: относительно #wrapper, #push и #footer. Теперь нижний колонтитул появляется ниже порога загруженной позиции на экране ..., что создает приятный "скрытый эффект нижнего колонтитула".

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

Ответы [ 2 ]

1 голос
/ 22 июня 2010

Попробуйте добавить position:relative в нижний колонтитул и обертку. Затем clear:both, чтобы #push. Посмотрите, поможет ли это.

1 голос
/ 22 июня 2010

Вы должны удалить отрицательное поле из #wrapper и установить clear:both; position: relative; для #push. Надеюсь, это поможет: D

...