верхний и нижний колонтитулы, которые всегда появляются вверху и внизу

Question

Я знаю, что могу просто использовать главную страницу, но какую разметку я использую на главной странице, чтобы всегда иметь верхний колонтитул вверху и нижний колонтитул полностью внизу, используя некоторый код CSS?

Answer 1

Хотя я не совсем уверен, каков ваш контекст, в целом вы можете сделать это, установив display:fixed для вашего нижнего колонтитула и идентификатора / класса верхнего колонтитула и используя bottom:0 для нижнего колонтитула и top:0 для заголовка.

Возможно, вы захотите включить максимум z-index для обоих, чтобы они всегда отображались на самом верхнем слое.

Проблема с этим решением состоит в том, что фактическое содержимое страницы прокручивается за обоими элементами и может быть нечитаемым, поэтому вам нужно настроить верхнюю и нижнюю margin для обоих.

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

Answer 2

Для нижнего колонтитула:

Это называется липкий нижний колонтитул. Вы можете погуглить и найти его (google css sticky footer). Мне нравится это один .

Answer 3

Использование position: fixed

Таким образом, заголовок может быть:

.header {
     position: fixed;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100px;
}

И нижний колонтитул:

.footer {
     position: fixed;
     bottom: 0px;
     left: 0px;
     width: 100%;
     height: 50px;
}

Это будет верхний колонтитул высотой 100 пикселей и нижний колонтитул высотой 50 пикселей Обратите внимание, что position: fixed не работает в IE6 по умолчанию