CSS: оставьте рамку внизу страницы (не окна)

Question

У меня есть простая страница, и я пытаюсь установить границу внизу тела моей страницы в CSS следующим образом:

body {
    height: 100%;
    border-bottom-color: #ad3127;
    border-bottom-style: solid;
    border-bottom-width: 5px;
}

Это прекрасно работает, если у меня достаточно контента, чтобы заполнить все окно, особенно когда нужно прокрутить: панель появляется внизу страницы (а не в окне. Я не хочу, чтобы она всплывала содержание или что-то подобное).

Проблема в том, что, когда контента недостаточно для заполнения всего окна, панель появляется только внизу, где бы ни заканчивался контент. Это имеет смысл, но это явно не то, что я хочу.

Я пробовал что-то вроде

html {
    height: 100%;
}

Что, похоже, работает в обоих случаях, за исключением случаев, когда я изменяю размер окна, оно искажается (по крайней мере, в Firefox 4), а в Mobile Safari оно отображается в нижней части моего окна просмотра (то есть в середине моего содержимого). ). Так что, похоже, это не для меня.

Должен быть способ решить эту проблему (с минимальным колдовством, пожалуйста:)).

Answer 1

Вместо height: 100% используйте min-height: 100vh:

body {
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0;
  border-bottom: solid 5px #ad3127;
  padding-top: 1px;
}

<p>content</p>

Из-за box-sizing: border-box граница тела будет учитываться в росте.Единственный хак здесь - это то, что поля содержимого выдвигают границу ниже области просмотра, которая фиксируется произвольным значением padding-top.

Answer 2

Некоторое время назад Крис Койер сделал интересную статью о границах тела.Вот ссылка для справки: http://css -tricks.com / 558-body-border /

Чтобы сделать то, что вы хотите, самым кросс-браузерным способом было бы создать divон действует как граница, а затем задает фиксированное положение дна 0. Что-то на этот счет:

HTML: 
<div id="bottom"></div>

CSS:
#bottom {
    background: #ad3127;
    height: 5px;
    position: fixed;
    left: 0;
    bottom: 0;
}

Немного менее хакерский способ, менее совместимый с старыми браузерами, - использование псевдоэлементов:

body:after {
    content: "";
    position: fixed;
    background: #ad3127;
    height: 5px;
    position: fixed;
    left: 0;
    bottom: 0;
}