Блог

Главная - Вопросы по программированию - Липкий нижний колонтитул прилипает, но содержимое не

Липкий нижний колонтитул прилипает, но содержимое не

#asp.net #html #css #sticky-footer

#asp.net #HTML #css #липкий нижний колонтитул

Вопрос:

У меня есть липкий нижний колонтитул, который работает, но я использую фоновое изображение с плиткой и внутренний раздел #content. Проблема, с которой я сталкиваюсь, заключается в том, что #content не будет расширяться, чтобы заполнить высоту контейнера. У меня есть демо на http://jsfiddle.net/mpRUT/1 /, где я изменил цвета, чтобы проиллюстрировать. Единственное, что удерживает #content от разрушения в небытие, когда страница пуста, — это min-height набор на ней.

Могу ли я заставить его расширяться, чтобы заполнить контейнер, или мне просто нужно установить большую минимальную высоту и потерять некоторые браузеры?

Эффект можно увидеть на http://myfitzeek.lime49.com /

Комментарии:

1. Извините, я действительно не понимаю вашего вопроса, поскольку я не вижу, чтобы нижний колонтитул был липким. — Я думаю, вы хотите расположить нижний колонтитул с position: fixed; помощью и исправить позиции / поля; и установите height значение на свое min-height значение. Таким образом, вам не нужен атрибут min-height .

2. Мне нужно, чтобы средний раздел содержимого (белый) растягивался вниз и закрывал синий. Проблема, с которой я столкнулся, заключается в том, что на демонстрационном сайте ( myfitzeek.lime49.com ), белый фон не расширяется вниз, чтобы покрыть фоновое изображение с плиткой.

3. Ах, теперь часть ниже тоже окрашена в синий цвет. Теперь я понимаю проблему. Спасибо. Я посмотрю на это и посмотрю, знаю ли я лучше 🙂

4. Вы могли бы использовать padding-top: 200 пикселей в вашем #нижнем колонтитуле (с z-index равным 1 и #content z-index равным 2). Это не элегантно, но обеспечит ваш визуальный эффект.

5. @mdi Заполнение по-прежнему перекрывает содержимое (нижний колонтитул с низким z-индексом обрезает нужное содержимое [#content с высоким z-индексом]) для меня, когда я тестировал это на веб-сайте с firebug.

Ответ №1:

IMO: не будет работать на 100% без минимальной высоты. (см. Комментарии)

Мой старый ответ:

Отредактированный образец (как форк): http://jsfiddle.net/4EtKh/1 /

 #wrapper: {
    /*min-height:100%;*/ /* remove! */
    position:relative;
    height:100%; /* new! */
    overflow: hidden; /* new! */
}

#content {
    text-align: left;
    line-height: 140%;
    background: #fff;
    font-size: 1.2em;
    /*min-height: 80px;*/ /* remove! */
    height: 100%; /* new! */
}

Комментарии:

1. Я покрасил нижний колонтитул в красный цвет, чтобы визуально прояснить элементы. — Я также протестировал это решение на вашей странице с помощью firebug. Это работает.

2. Спасибо, но проблема с этим решением заключается в том, что я теряю возможность прокручивать содержимое #content, если в нем слишком много.

3. О, это облом. Не думал, что переполнение работает таким образом. Извините. Боюсь, я не могу придумать никакого другого решения без использования min-height, потому overflow: scroll; что это не то, что кто-то хотел бы. В противном случае ваш нижний колонтитул всегда будет внизу содержимого, а не внизу страницы, когда содержимое пустое.

4. Хотя это был отличный ответ, спасибо за попытку. Я не могу поверить, что это так сложно, я вечно борюсь с нижними колонтитулами.

Ответ №2:

Велика вероятность, что вам нужно будет установить min-height: 100%; и вычесть высоту нижнего колонтитула, используя отрицательный запас.

 #wrapper { margin-bottom: -60px; }
#footer  { height: 60px; }

Какие ваши целевые браузеры? Вы выражаете некоторые опасения по поводу минимальной высоты — почему бы не создать нижний колонтитул так, чтобы он выглядел приемлемо в свернутом виде, чтобы он хорошо ухудшался в старом браузере? Если вы используете боковую панель в готовом дизайне, вы можете использовать .clearfix методы принудительного размещения нижнего колонтитула внизу, что означает, что он не обязательно будет заметен.

Помимо выполнения position:fixed; в нижнем колонтитуле и использования фонового изображения на вашем #wrapper , чтобы создать впечатление полноразмерной панели содержимого, я не знаю способа заставить это работать без использования min-height #content (например, так).

Комментарии:

1. Как будет работать вычитание нижнего колонтитула? Я не знаю, как это сделать, поскольку Echilon смешал абсолютные (px) и относительные (в процентах) размеры для контейнеров.

2. Ах, извините, я плохо сформулировал это. Значение margin-bottom должно быть равно отрицательной высоте нижнего колонтитула. Посмотрите этот пример .