позиционирование нижнего колонтитула

Question

Я хотел бы расположить нижний колонтитул на расстоянии около 20–30 пикселей или в процентах от нижней части экрана. При просмотре элементов с * {outline: solid 1px} в нижней части экрана появляется прямоугольник, который должен быть либо элементом html, либо отмечать нижнюю границу тела. Я немного запутался в позиционировании элементов и, несмотря на то, что поиграл с вариантами позиционирования в различных вариациях, я не могу получить нижний колонтитул там, где я хочу. Какова лучшая практика здесь? Как мне разместить нижний колонтитул?

Answer 1

Не видя ни одного вашего кода, трудно представить, почему у вас ничего не получается.Но мое первое предположение состоит в том, что вы неправильно стилизовали элемент body.По умолчанию многие современные браузеры применяют некоторый вид отступов или полей к телу.Таким образом, вы должны использовать следующее правило для его сброса:

body { margin: 0; padding: 0; }

Это сбросит настройки по умолчанию, что позволит вам действовать так, как вам нравится.Вы также можете использовать правило CSS position: fixed для элемента, который вы хотите закрепить в нижней части экрана.Пример:

#footer { position: fixed; bottom: 0; height: 30px; }

Answer 2

Если вы хотите получить его внизу (+ 30px) документа

footer{
   position:absolute;
   bottom:30px;
}

Если вы хотите получить его внизу документа, вам понадобится JavaScript для вычислениявысота окна

и сделать что-то вроде (в jquery)

$('footer').css({'position':'fixed','top':$(window).height()-$('footer').height()});

или только с CSS, вы также можете сделать:

.footer{
    position:fixed;
    height:2%;
    top:98%;
}