Нижний колонтитул на короткой странице, без лишней разметки или Javascript

Question

Я пытался найти лучший способ справиться с нижним колонтитулом на короткой странице, не используя лишнюю, несемантическую разметку.Я заинтересован в том, чтобы быть по-настоящему педантичным по этому поводу.Итак, давайте обсудим:

Самый простой вариант - позволить цвету фона тела выйти за нижний колонтитул.Но если ваш нижний колонтитул другого цвета, это может выглядеть плохо. Простая демонстрация

Липкие нижние колонтитулы требуют добавления элемента push, который не имеет смыслового значения.Гадость.

Javascript ?Абсурд.

Какой-то искусственных столбцов ?Нет фоновых изображений.

Установка background-color для body или html на цвет, который вы хотите footer, и «накрытие» оберткой на всю ширину div( Демо ).У меня не было бы этих оболочек div s, если бы я не хотел этого эффекта.Они не добавляют смыслового значения.

Хммм.

Я экспериментировал с новым гибким боксом CSS3 и собрал все вместе this .

html{height:100%;}
body{display:box; box-orient:vertical; height:100%;}
header{height:50px; background:salmon;}
section{height:50px; /*height:2000px;*/}
footer{width:100%; min-height:100px; box-flex: 1; background:lightblue;}

Это работает именно так, как я хочу.Когда содержимое слишком короткое, чтобы вызывать полосы прокрутки, нижний колонтитул заполняет оставшееся пространство, а когда содержимого намного больше, он уменьшается до min-height (не идеально).Это работает - в WebKit.Firefox очень странно обращается с display: box.По какой-то причине вы не можете центрировать элементы, которые display: -moz-box.В настоящее время ни Opera, ни IE не поддерживают flexbox.Кроме того, он грациозно ухудшается, что очень необходимо.

Я в тупике.Я мог испачкать и загромождать свою разметку, принять некоторую изящную деградацию в некоторых современных браузерах (включая only display: -webkit-box, -webkit-box-flex и т. Д.) Или изменить свой дизайн на основе ограничений CSS, ноне хочу идти ни на один из этих компромиссов.Помоги мне.

Answer 1

Если вы хотите использовать псевдоэлемент в вашем CSS, вы можете сделать это:

footer:after { 
  background: lightblue; /*same color as footer*/
  content: "";   
  margin-top: 100px; /*height of footer. (prevents overlapping footer content)*/
  position: fixed;
  width: 100%;
  height: 100%;
}

Без изменений в разметке, и это должно работать в большинстве браузеров.