CSS3 альтернатива для 100% ширины колонтитула с фиксированной шириной

Question

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

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

Вот демонстрационная версия о том, как добиться этого эффекта с помощью контейнеров.

Однако мне не нравится, что это вызывает дополнительный div в макете, и я решил, что должен быть лучший способ сделать это с помощью CSS3.

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

Я пытался поиграться с градиентами, сгенерированным контентом и т. Д., Но не могу найти решение.Есть ли что-нибудь лучше, чем дополнительный div?

Мне нужно только решение, которое работает в современных браузерах, таких как Firefox и Chrome.

Обзор решений

1. Градиенты CSS на теге HTML
2. Границы на теге HTML
3. Цвет фона на HTML /Бирка тела (допускается только для 1 полосы)

Answer 1

Эта реализация, использующая border на body, не использует CSS3 (хотя и используется HTML5).С отрицательными полями это, вероятно, немного странно, но в целом элементов меньше.

Answer 2

Почему вы не можете просто установить цвет bg на body и / или html?

Answer 3

Хорошо, я наконец-то понял, как сделать это с градиентами. Я тестировал это только в Firefox 4, где он прекрасно работает, но также должен работать и в 3.6:

html {
  background: -moz-linear-gradient(top, green 50px, transparent 50px),
              -moz-linear-gradient(bottom, green 50px, white 50px);
}

Вот демонстрационная программа, воссоздающая исходный макет (убедитесь, что вы просматриваете его в Firefox).

1) нам нужно иметь 2 градиента для создания эффекта, один для верхнего колонтитула и один для нижнего колонтитула.

2) Значение пиксела, присваиваемое каждому цвету градиента, указывает, где градиент должен начинаться ИЛИ останавливаться. Это означает, что первое свойство градиента должно читаться как «Начните зеленый цвет с верха элемента html до 50 пикселей. Затем начните прозрачный цвет с 50 пикселей до конца».

3) Несколько фонов наслоены в том порядке, в котором они объявлены. Это означает, что градиент заголовка будет длиной элемента html и появится поверх градиента нижнего колонтитула. Это может скрыть градиент нижнего колонтитула, поэтому необходимо, чтобы второе значение цвета первого градиента было прозрачным. Если вам нравится, вы можете установить второе значение цвета второго градиента на то, что вы хотите, и он даст вам цвет фона. Кроме того, вы можете просто установить прозрачность, а затем установить цвет фона после 2-го градиента. Может потребоваться некоторая потеря производительности для рендеринга прозрачности, хотя это может быть оптимизировано в этом конкретном случае использования.

4) Если вам нужен липкий нижний колонтитул, убедитесь, что элемент html имеет min-height:100%.

Чтобы не дать вам сходить с ума, вы также можете использовать этот миксин с sass, который должен работать в сборках Firefox 3.6, Opera / Chrome / Safari Nightly и, что, вероятно, станет стандартным синтаксисом.

@mixin stripe($height, $color) {
    background-image: -moz-linear-gradient(top, $color $height, transparent $height), -moz-linear-gradient(bottom, $color $height, transparent $height);
    background-image: -o-linear-gradient(top, $color $height, transparent $height), -o-linear-gradient(bottom, $color $height, transparent $height);
    background-image: -webkit-linear-gradient(top, $color $height, transparent $height), -webkit-linear-gradient(bottom, $color $height, transparent $height);
    background-image: linear-gradient(top, $color $height, transparent $height), linear-gradient(bottom, $color $height, transparent $height);
}

//Example usage
html { @include stripe(50px, green); }