Page 283 - Сила CSS3 Освой новейший стандарт

Возвращаемся в действительность: что работает сейчас • 283

Теперь с помощью свойства display превратите обрамляющий div-блок в гибкое
поле и прикажите ему выводить дочерние элементы вертикально, настроив свойство
box-orient. Задайте минимальную высоту 100%, чтобы высота блока всегда была,
как минимум, равна высоте области просмотра:
#wrapper {
display: -moz-box;
display: -o-box;
display: -webkit-box;
display: box;
-moz-box-orient: vertical;
-o-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient: vertical;
min-height: 100%;
margin: 0 6%;
}

Теперь три дочерних элемента обрамляющего div-блока (header, content и footer)
выводятся один над другим. Они и раньше отображались именно так, поэтому до-
бавление новых свойств не изменило представление страницы ни в одном из брау-
зеров, вне зависимости от того, поддерживают ли они модель гибкого поля. Однако
для того чтобы дочерние элементы стали гибкими, необходимо сам обрамляющий
div превратить в гибкое поле.
Среди дочерних элементов гибким мы хотим сделать div-блок content. Добавьте для
него новое правило, присваивающее свойству box-flex значение 1:

#content {
-moz-box-flex: 1;
-o-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}

Теперь, после учета внутренней высоты заголовка и нижнего колонтитула — остав-
шееся свободное пространство внутри обрамляющего div отдается div-блоку content,
а суммарная высота всех трех div-блоков всегда получается не меньше высоты об-
ласти просмотра. Таким образом, нижний колонтитул выводится у нижнего края
области просмотра, а не прямо под блоком основного содержимого (рис. 7.25).

Браузеры, не поддерживающие модель гибкого
поля, попросту игнорируют данное правило и Завершенная страница называ-
выводят страницу как раньше: нижний колон- ется sticky-footer_final.html и со-
титул вплотную примыкает к div-блоку content хранена в папке с остальными
(кстати, так работают почти все существующие файлами упражнений для этой
страницы в Сети). У пользователей этих браузе- главы.
ров не будет причин полагать, что они не видят

www.trk.kg