Не могу сделать нижний колонтитул придерживаться нижней части страницы - PullRequest
Новая
       43

Не могу сделать нижний колонтитул придерживаться нижней части страницы

1 голос
/ 22 июля 2011

smiths-heimann.az - мой сайт. перепробовал все инструкции из http://www.cssstickyfooter.com/ Но он не работает для меня (доказательство того, что он не работает http://smiths -heimann.az /? page = 3 ). Пожалуйста, помогите мне сделать нижний колонтитул в нижней части страницы и удалить пустую строку между 2 делениями http://prntscr.com/2e2fp Заранее

Ответы [ 2 ]

3 голосов
/ 22 июля 2011

Ваш #footer внутри #wrap. Липкий код нижнего колонтитула имеет нижний колонтитул снаружи #wrap: 

<div id="wrap">
    <div id="main">
        <div id="content">
        </div>
        <div id="side">
        </div>
    </div>
</div>

<div id="footer">
</div>

Редактировать

Только что посмотрел ваш сайт с кодом перемещенного нижнего колонтитула. Внизу у вас есть пробел, который, если вы не хотите, можно решить, сделав #footer height таким же, как margin-top нижнего колонтитула, но положительным.

Изменить на другую проблему

Внутри вашего заголовка у вас есть навигация ul с несколькими классами: sf-menu, sf-js-enabled и sf-shadow. Если вы уберете margin-bottom: 1em, разрыв будет удален.

Изменить на проблему с не растягивающимся фоном

Это все еще довольно просто, хотя это немного изменит прозрачность заголовка.

Найдите background-image для #container в вашем CSS-файле и переместите его в #wrap. Чтобы уточнить, #wrap должен иметь этот CSS: 

#wrap 
{
    min-height: 100%;
    background: url("img/tff.png") 0 0 repeat;
}

И #container должно выглядеть так: 

#container 
{
    min-width: 980px;
    width: 100%;
    overflow: auto;
    padding-bottom: 110px;
}

Второе редактирование для проблемы растяжения фона

Ok. Уф. Я это сделал; Я тоже убрал полосу прокрутки.

Make #footer be: 

#footer {
    background: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE) repeat scroll 0 0 transparent;
    border-top: 1px solid #919191;
    clear: both;
    font-size: 10px;
    height: 110px;
    margin-top: -126px;
    padding-top: 5px;
    position: relative;
    text-align: center;
    width: 100%;
}

Полоса прокрутки появлялась, потому что границы и отступы добавляют дополнительную высоту в нижний колонтитул, поэтому отрицательное поле было на самом деле слишком маленьким. Я изменил его на -116px. Хотя это работает в Firefox, ОП обнаружил, что оно не работает в Chrome . В конце концов, отредактированное изображение было использовано для получения требуемой функциональности. Используйте этот ответ только для справки.

Теперь сделайте #wrap это: 

#wrap {
    background: url("img/tff.png") repeat scroll 0 0 transparent;
    height: auto;
    margin-top: 100px;
    min-height: 100%;
    position: relative;
}

Наконец, сделайте .header this: 

.header {
    background-image: url("img/nav/trans.png");
    color: white;
    height: 80px;
    top: -100px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
    position: relative
}
0 голосов
/ 22 июля 2011 
 margin-top: -150px;

потерять этот CSS

...