Еще один нижний колонтитул, который не будет оставаться внизу

-1

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

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

У меня есть текущий HTML как

<footer class="site-footer"> 
    <div class="page-wrapper"> 
    </div> 
</footer>

и мой CSS, как

.site-footer { 
    position: relative; 
    width: 100%; 
    margin: 10em auto 0; 
    background: white; 
    padding: 1.5em; 
    height: 90px; 
    margin-bottom: -90px; 
    bottom: 0; 
    text-align: center; 
}

источник

2015-05-19 Eric H

Он остается в нижнем правом углу? –

Каково ваше isseue? Я вижу это внизу страницы ... –

@ManojKumar Я только что обновил описание проблемы. Хорошим примером проблемы является страница контактов. Спасибо –

Установите padding-bottom: 0 в .page и заменить position: relative с position: absolute

.page { 
    padding-bottom: 0; 
} 

.site-footer { 
    position: absolute; 
    margin: 0; 
    bottom: 0; 
    height: 90px; 
    background-color: #fff; 
    width: 100%; 
    padding: 1.5em; 
}

источник

2015-05-19 17:13:42

с использованием 'overflow: hidden' на теле удаляет возможность прокрутки для содержимого –

Я выбрал неправильный класс и отредактировал Это. Было дно для .page. Зачем? –

Колонтитул не на снизу из-за положения: относительный, который просто покоится в нижней части содержимого страниц.

Чтобы она оставалась в нижней части каждой страницы я хотел бы предложить:

position: absolute; 
bottom: 0; 
left: 0; 
height: 90px;

и т.д ..

Вы можете просмотреть демо на How to Keep the Footer Down

источник

2015-05-19 17:13:59 samb0x

Единственный разрыв I см., когда страница имеет определенную ширину (ширина экрана менее 680 пикселей) и что вызвано этим свойством:

.page-column { 
    text-align: left !important; 
    display: block !important; 
    width: 100% !important; 
    margin: 2em auto; 
}

Удалить margin: 2em;, и зазор будет удален.

источник

2015-05-19 17:15:12

Вы, вероятно, хотите position: fixed:

.site-footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 90px; 
}

Это прикрепляет колонтитул DIV в нижней части окна просмотра.

источник

2015-05-19 17:17:55

«Позиция: исправлена» работает правильно, я на самом деле раньше занимал фиксированную позицию, но хотел ее изменить - вот где я столкнулся с проблемой. –

Если вы хотите, чтобы нижний колонтитул оставался прикрепленным к нижней части окна, тогда «позиция: фиксированная» - это то, что вы хотите. –

Простейшее исправить.

Просто добавьте это в свой CSS.

body { 
    padding-bottom: 0px !important; 
}

нет ничего на самом деле не так с CSS, это просто, что где-то вы дали некоторое дополнение к вашему телу элемента вызывает проблему.

До: enter image description here

После: enter image description here

источник

2015-05-19 17:44:53

Еще один нижний колонтитул, который не будет оставаться внизу

ответ

Смежные вопросы