Есть нижний колонтитул, который находится в нижней части страницы с фиксированным заголовком - PullRequest
Новая
       22

Есть нижний колонтитул, который находится в нижней части страницы с фиксированным заголовком

0 голосов
/ 13 ноября 2011

Мне бы хотелось, чтобы мой нижний колонтитул оставался в нижней части страницы, когда содержимое слишком маленькое (я не хочу видеть мой нижний колонтитул в середине моей страницы).

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

Дело в том, что все эти вещи не работают, потому что бывает, что у меня есть фиксированный заголовок, что означает, что мой фактический контент начинается с body + 130px 

body{
  padding-top: 130px;
}

В результате получаетсяда, мой нижний колонтитул находится внизу, но я все еще могу прокрутить еще 130 пикселей.

Все учебники и вопросы, которые я вижу, не имеют фиксированного заголовка.

Спасибо всем

Ответы [ 2 ]

2 голосов
/ 13 ноября 2011

В качестве модели по умолчанию используется поле содержимого . Добавление padding-top к элементу с height:100%; приведет к его высоте 100% + 130px.

Таким образом, вы должны добавить еще одну <div> оболочку с автоматической высотой и добавить ее padding-top: 130px;

<html style="height:100%;">
<body style="height:100%; margin:0; position:relative;">
    <div id="wrapper" style="min-height:100%;">
        <div id="container" style="padding-top:130px; padding-bottom:130px;">
        </div>
    </div>
    <div id="footer" style="position:absolute; bottom:0; height:130px;">
    </div>
</body>
</html>
0 голосов
/ 13 ноября 2011

Попробуйте добавить margin-top:-130px; в контейнер нижнего колонтитула.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...