Создайте элемент нижнего колонтитула, расположенный под экраном

У меня есть страница, которая не заполняет всю высоту экрана, но я хочу, чтобы нижний колонтитул оставался чуть ниже экрана, чтобы он появлялся сразу после начала прокрутки — независимо от высоты экрана человека.

Как мне это сделать с помощью CSS?

ИЗМЕНИТЬ

Я пытался:

#footer{
    position:absolute;
    left:0px;
    top:100%;
}

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


html layout css footer
person Hope4You    schedule 27.10.2012    source источник
comment
объявление редактирования) попробуйте установить margin-top: -HEIGHT   -  person J. K.    schedule 28.10.2012
comment
@IanKuca высота зависит от размера страницы   -  person Hope4You    schedule 28.10.2012
comment
Высота нижнего колонтитула? Это облом.   -  person J. K.    schedule 28.10.2012
comment
@IanKuca Я пытался ввести высоту нижнего колонтитула. Это работает, но нижний колонтитул мешает, если моя фактическая страница выходит за пределы экрана. Если страница выходит за пределы экрана, я хочу, чтобы нижний колонтитул был прямо под всем остальным.   -  person Hope4You    schedule 28.10.2012

Ответы (2)


arrow_upward
1
arrow_downward

Вот простой пример макета, который вы описываете:

HTML

<html>
<head><title>Hidden Footer</title></head>
<body>
    <div id="content">
        Content here
    </div>
    <div id="footer">
        Footer here
    </div>
</body>
</html>

CSS

html,
body { height: 100%; min-height: 100%; }

#content { min-height: 100%; }
#footer { background: #ccc; }
person Kevin Boucher    schedule 27.10.2012
comment
Я попробовал только ваш пример кода, и он отлично работает, независимо от того, как долго мой content! Спасибо. - person Hope4You; 28.10.2012
comment
Есть ли способ сделать это без добавления этих атрибутов CSS к html и body? Мне нравится держать эти теги свободными от этих типов атрибутов. - person Hope4You; 28.10.2012
comment
Под «атрибутами» вы подразумеваете CSS, применяемый к этим элементам? Если да, то, к сожалению, нет. Эти стили необходимы, чтобы подтолкнуть нижний колонтитул ниже области просмотра. (У меня не было бы никаких оговорок по поводу добавления CSS к этим двум элементам. Это делается все время для макетов, которые «относительны области просмотра»). Область содержимого не будет расширяться до 100% без контейнеров body и html, позволяющих это . - person Kevin Boucher; 28.10.2012

arrow_upward
0
arrow_downward

Страница, на которую вы ссылаетесь, имеет фиксированный заголовок. Остальная часть тела прокручивается соответствующим образом.

Посмотрите на фиксированные верхние/нижние колонтитулы CSS, чтобы воспроизвести эффект.

person Lowkase    schedule 27.10.2012
comment
Какая у вас высота экрана? Когда я изменяю размер своего браузера на связанной странице, нижний колонтитул всегда будет появляться сразу после того, как я начну прокрутку, если я оставлю свободное пространство после контактной формы. - person Hope4You; 28.10.2012
comment
Как бы я использовал фиксированный нижний колонтитул? Я не хочу, чтобы нижний колонтитул появлялся сразу. - person Hope4You; 28.10.2012