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

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

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

РЕДАКТИРОВАТЬ

Я пытался:

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

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

 Hope4You27 окт. 2012 г., 22:38
@IanKuca высота зависит от размера страницы
 J. K.27 окт. 2012 г., 22:39
Высота нижнего колонтитула? Это облом
 J. K.27 окт. 2012 г., 22:37
объявление редактировать) попробуйте настройкиmargin-top: -HEIGHT
 Hope4You27 окт. 2012 г., 22:41
@IanKuca Я попытался набрать высоту нижнего колонтитула. Это работает, но нижний колонтитул мешает, если моя фактическая страница выходит за высоту экрана. Если страница превышает высоту экрана, я хочу, чтобы нижний колонтитул находился прямо под всем остальным.

Ответы на вопрос(3)

Решение Вопроса

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; }
 Kevin Boucher27 окт. 2012 г., 22:39
@ Hope4You Спасибо.
 Kevin Boucher27 окт. 2012 г., 22:44
Большой! Рад, что смог помочь.
 Hope4You27 окт. 2012 г., 22:45
Есть ли способ сделать это без добавления этих атрибутов CSS вhtml а такжеbody? Мне нравится хранить эти теги свободными от этих типов атрибутов.
 Kevin Boucher27 окт. 2012 г., 22:48
Под «атрибутами» вы подразумеваете CSS, примененный к этим элементам? Если так, то, к сожалению, нет. Эти стили необходимы для перемещения нижнего колонтитула под окном просмотра. (У меня не было бы никаких оговорок по поводу добавления CSS к этим двум элементам. Это делается постоянно для макетов, относящихся к области просмотра). Область содержимого не будет расширена до 100% без учета содержимого для тела и контейнеров HTML. ,
 Hope4You27 окт. 2012 г., 22:44
Я попробовал только ваш пример кода, и он прекрасно работает, независимо от того, как долго мойcontent является! Спасибо.

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

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

 Hope4You27 окт. 2012 г., 22:33
Как бы я использовал фиксированный нижний колонтитул? Я не хочу, чтобы нижний колонтитул появился сразу.
 Hope4You27 окт. 2012 г., 22:32
Какова высота вашего экрана? Когда я изменяю размер своего браузера на связанной странице, нижний колонтитул всегда будет отображаться сразу после начала прокрутки, если после контактной формы у меня останется некоторое свободное место.
html {
  min-height: 100%;
}
body {
  min-height: 100%;
  padding-bottom: 40px; /* free space for the footer */
  box-sizing: border-box; /* don't add padding to the actual height */
}
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
}

Ваш ответ на вопрос