Перекрывающиеся блоки с липким нижним колонтитулом CSS + макет сетки 960

Я скачал липкий футер CSS и Система сетки 960 код.

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

Я использую код липкого нижнего колонтитула css с системой сетки 960, но когда содержимое боковой панели расширяется и достигает нижнего колонтитула, нижний колонтитул перекрывает конец содержимого боковой панели:

http://noseyparka.me.uk/sandbox/

Есть идеи, где я ошибаюсь и как я могу решить эту проблему?


css sticky-footer 960.gs
person unpossible    schedule 23.05.2012    source источник

Ответы (3)


arrow_upward
2
arrow_downward

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

чтобы решить эту проблему, добавьте идентификатор main на уровень содержимого тела (который в нашем случае является контейнером 960gs), чтобы разместить:

<div id="wrap">
    <div class="container_12" id="main">
        <!-- ... -->
    </div>
</div>

Ссылка:

person Eliran Malka    schedule 25.05.2012
comment
Я не могу понять, как я это пропустил. Спасибо большое, Элиран - ты звезда! - person unpossible; 28.05.2012

arrow_upward
0
arrow_downward

Ссылка вроде в порядке. Вроде починил. И в нижний колонтитул встроен CSS, который я собирался предложить: clear:both.

person Community    schedule 23.05.2012
comment
Adobe BrowserLab говорит иначе. Проблема наблюдается во всех браузерах, включая Chrome 18.0 в Windows. - person unpossible; 24.05.2012
comment
Ой вэй! Вы правы, в других браузерах не получилось. Только в ФФ. Пройдя по вашей прикрепленной ссылке в нижнем колонтитуле ... наткнулся на некоторые характеристики. Попробуйте добавить padding-bottom:100px к вашему #wrap. Он должен работать. Вот в чем дело: какой бы ни был ваш отрицательный верхний край в нижнем колонтитуле, он должен соответствовать нижнему отступу для #wrap. В противном случае он будет перекрываться. Надеюсь, это сработает! - person ; 25.05.2012
comment
Еще раз, этот подход решает проблему перекрытия, но он выталкивает нижний колонтитул за пределы области просмотра, создавая полосу прокрутки, что, на мой взгляд, в первую очередь противоречит цели использования липкого нижнего колонтитула. - person unpossible; 25.05.2012
comment
Но это то, что говорит ваша липкая ссылка на страницу. Они говорят, что нужно убедиться, что padding-bottom в #main должен совпадать с отрицательным верхним полем в #footer. Если padding-bottom:100px не работает, настройте число, пока оно не сработает для вас. Кроме того, я начинаю задаваться вопросом о концепции липкого нижнего колонтитула здесь. Кажется, вам нужен тот, который всегда будет оставаться в поле зрения, пока страница прокручивается вниз, да? Потому что липкая страница нижнего колонтитула, которую вы предоставили, этого не делает. И их страница является свидетельством этого (то есть нижний колонтитул не остается в области просмотра, пока страница прокручивается вниз). Запутался сейчас - person ; 25.05.2012
comment
Извините, что так многословен по этому поводу! Однако, если вы хотите, чтобы ваш нижний колонтитул буквально оставался на виду все время, независимо от статуса страницы, я думаю, вы не используете это. Вы фиксируете положение нижнего колонтитула. Например, я прямо сейчас погуглил: davidwalsh.name/css-fixed-position или даже это : stackoverflow.com/questions/10465250/css-sticky-footer. - person ; 25.05.2012
comment
Нет, не ищите нижний колонтитул, чтобы всегда быть на виду, вы упускаете мою мысль. Ваше оригинальное исправление padding-bottom:100px сработало, но проблема в том, что когда панели содержимого пусты, нижний колонтитул появляется под окном просмотра. Я надеюсь, что в этом есть смысл. - person unpossible; 25.05.2012
comment
Я понимаю что ты имеешь ввиду. (Впервые я узнал, что могу удалять узлы с помощью инструмента разработчика в Chrome!). Действительно ли это необходимая проблема для беспокойства? Будут ли ваши панели контента когда-либо такими пустыми? Во всяком случае, вот возможное решение. Пробовал это в хроме со всеми удаленными узлами, и, кажется, нижний колонтитул все еще остается в поле зрения, я думаю. Поместите padding-bottom:100px в класс container_12. Когда я это сделал, нижний колонтитул все время был в поле зрения в Chrome (и это при удалении всех узлов содержимого). Надеюсь, это поможет, а если нет, я сдаюсь! (не делайте мое предыдущее решение. только это) - person ; 26.05.2012

arrow_upward
0
arrow_downward

Если вы добавите margin-bottom в свой контейнер, как это

.container_12 {
    margin-bottom: 100px;
    }

Это компенсирует #footer наличие margin-top: -100px

person frontendzzzguy    schedule 23.05.2012
comment
Этот рабочий подход решает проблему перекрытия, но он также выталкивает нижний колонтитул за пределы области просмотра, создавая полосу прокрутки, что в первую очередь противоречит цели использования липкого нижнего колонтитула. - person unpossible; 24.05.2012
comment
что такое minus-top? ты хотел сказать top: -100px;? - person Eliran Malka; 25.05.2012
comment
Извините, что это был оверсайт. Должен был быть margin-top: -100px; Думаю, я создавал там свой собственный CSS. Ни разу не хорошая идея. - person frontendzzzguy; 25.05.2012