В качестве примера, иллюстрирующего поставленную задачу, могу привести вот этот топик: Миниатюрное приложение-калькулятор. Особенность, которую должен учесть верстальщик, заключается в следующем: окно с приложением обычно не растянуто на весь экран (зачем, например, разворачивать на весь экран калькулятор или софтфон?), но при этом размер окна может меняться пользователем, причём меняться очень даже произвольно, вплоть до полного экрана.
Итак, возникла производственная задача: необходимо расположить на страничке шапку фиксированной высоты, а всё остальное место заполнить контейнером с возможностью появления полосы прокрутки в случае большого количества контента в нём. Т.е. должна прокручиваться не страничка, а див (а-ля аська, в шапке кнопочки, в контейнере контакт-лист). Казалось бы, задача тривиальная, решается с кандачка (у дива высота 100% и каким-то образом вычесть из неё фиксированную высоту шапки). Ан нет, час битья лбом о клавиатуру ничего не принёс.
Уже дома в уставшую голову пришла бредовая идея — попробовать растянуть див по вертикали с помощью top:0, bottom:0. И, знаете, сработало! Правда, не везде — ИЕ6 заупрямился, никак не хотел совмещать нижний край дива с нижним краем страницы. Пришлось его «хакнуть».
Вот, что у меня получилось (в примере даже два контейнера с различным по величине содержимым):
Кстати, чтобы в этот код добавить фиксированный по высоте «подвал», нужно для него назначить такой стиль: {position: absolute; bottom: 0; width: 100%; height: 100px;} и учесть его в стиле .block (изменить значение bottom на величину высоты добавляемого блока, плюс в expression вычесть эту же величину).
Итак, возникла производственная задача: необходимо расположить на страничке шапку фиксированной высоты, а всё остальное место заполнить контейнером с возможностью появления полосы прокрутки в случае большого количества контента в нём. Т.е. должна прокручиваться не страничка, а див (а-ля аська, в шапке кнопочки, в контейнере контакт-лист). Казалось бы, задача тривиальная, решается с кандачка (у дива высота 100% и каким-то образом вычесть из неё фиксированную высоту шапки). Ан нет, час битья лбом о клавиатуру ничего не принёс.
Уже дома в уставшую голову пришла бредовая идея — попробовать растянуть див по вертикали с помощью top:0, bottom:0. И, знаете, сработало! Правда, не везде — ИЕ6 заупрямился, никак не хотел совмещать нижний край дива с нижним краем страницы. Пришлось его «хакнуть».
Вот, что у меня получилось (в примере даже два контейнера с различным по величине содержимым):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Веб-приложение</title>
<style type="text/css">
* {margin: 0; padding: 0;}
/* "Ластик", подчищает значения по умолчанию (для разных браузеров и разных элементов на странице они разные). Просто я так привык :) */
html, body {height: 100%;}
/* Этот стиль необходим для того, чтобы expression (см. хак для ИЕ6 ниже по коду) тянул колонки по всей высоте clientHeight, которая по умолчанию равна величине контента на странице. */
.block {position: absolute; top: 100px; bottom: 0; overflow: auto;}
/* Общий стиль для всех блоков, которые будут тянуться до нижней границы окна браузера. Основная идея в том, чтобы использовать одновременно параметры top и bottom при абсолютном позиционировании (Внимание! Высоту для ДИВов задавать не надо, они и так растянутся по значениям top и bottom). Здесь top:100px - фиксированная высота шапки. Проблема возникла только в ИЕ6, он не воспринимает одновременно два этих параметра. Пришлось применить хак для него (см. ниже). Прокрутка включается параметром overflow. */
* html .block {height: expression(document.body.clientHeight-100 + "px");}
/* CSS-хак, действующий на ИЕ6 и ниже. Обратите внимание, здесь из высоты clientHeight вычитается высота шапки (100 пикс.) */
</style>
</head>
<body>
<div style="height: 100px; background: yellow">Фиксированная шапка, высота 100 пикс.</div>
<div class="block" style="width: 200px; background: green;">
Содержимое первого блока. Чтобы была видна суть, нужно вставить побольше контента...
</div>
<div class="block" style="left: 200px; width: 300px; background: red;">
Содержимое второго блока. Чтобы была видна суть, нужно вставить побольше контента...
</div>
</body>
</html>
Кстати, чтобы в этот код добавить фиксированный по высоте «подвал», нужно для него назначить такой стиль: {position: absolute; bottom: 0; width: 100%; height: 100px;} и учесть его в стиле .block (изменить значение bottom на величину высоты добавляемого блока, плюс в expression вычесть эту же величину).
- «Живой» пример (Уже не работает в силу причины отсутствия файлов на хостинге)
- Отображаемость в различных браузерах можно посмотреть на BrowserShots.org
