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

280 • Глава 7. Вспоминаем навыки верстки

будет доступна улучшенная версия формы, как
Завершенная страница называ- на рис. 7.21. Плохая поддержка браузерами, ко-
ется form_final.html и сохранена нечно, не позволяет применять модель гибкого
в папке с остальными файлами поля для управления макетом всей страницы,
упражнений для этой главы. но ничто не запрещает уже сейчас использовать
ее в подобных ситуациях в качестве изящной
техники прогрессивного усовершенствования.

липкий колонтитул
Еще один сценарий применения модели гибкого поля уже сейчас, без вреда для не
поддерживающих его браузеров — создание эффекта липкого колонтитула. Липкий
колонтитул (sticky footer) — это распространенное название эффекта, когда нижняя
полоса страницы прикрепляется к нижнему краю области просмотра, даже если со-
держимого недостаточно, чтобы «вытолкнуть» ее вниз (рис. 7.23). Данный эффект
можно реализовать и без помощи CSS3, но, как обычно, это намного сложнее. (На
странице http://www.cssstickyfooter.com/usingsticky-footer-code.html вы найдете
описание одного из способов и ссылки на несколько других версий.)
Хитрость создания липкого колонтитула с помощью модели гибкого окна за-
ключается в том, чтобы сделать гибким блок div, предшествующий колонтитулу
(с помощью того же свойства box-flex). Таким образом, этот блок div будет рас-
тягиваться и занимать все место, оставшееся в области просмотра после вывода
всех предыдущих div-блоков. Если свободного места нет — другими словами,
если страница и так длиннее области просмотра, — то div-блок, предшествующий
колонтитулу, будет отображаться в обычном размере и следом за ним колонтитул,
как на любой другой странице.
Для того чтобы испытать эту технику в деле, откройте файл sticky-footer_start.html
в редакторе кода. Это все та же страница из главы 6, но на этот раз я добавила к ней
еще один div-блок content, обрамляющий блоки content-main и content-secondary.
Я также убрала большую часть содержимого, чтобы сделать страницу очень корот-
кой. Вы видите, что сейчас нижний колонтитул выводится сразу под div-блоком
content, а пустое пространство в области просмотра находится под колонтитулом
(рис. 7.24).
Поскольку мы собираемся изменить представление всего макета страницы, в первую
очередь нужно заставить элементы body и html растягиваться на всю высоту области
просмотра, даже если фактического содержимого в них не так много.
Создайте для элемента html правило, устанавливающее высоту 100%, а также до-
бавьте строку height: 100% к существующему правилу body:

www.trk.kg