Добрый день, уважаемые.

Столкнулся со следующей проблемой.
Есть экран. В нем хедер (с фиксированной высотой) - привязан к верху. И футер (с фиксированной высотой) - привязан к низу.
По центру экрана свободное место. Так вот в это свободное место мне необходимо вставить блок (с фиксированной высотой и шириной), чтобы он был всегда по центру этой части экрана (исключая хедер и футер). Но если сжимать по высоте, то в определенный момент этот блок заходит за хедер и футер (так как они position: absolute). А мне необходимо, чтобы когда мой блок достигал хедер и футер, то у свободной области появлялся скролл.
Если проще, чтобы при любом разрешении мой блок находился в центре экрана и не пересекался с хедером и футером.
В общем, помогите, кто чем может. А то я уже мозг себе сломал.

По идеи так:
делаешь три горизонтальных блока: хедер, контент, футер. контент = боди-хедер-футер соотвественно. в контенте ставить position relative и overflow auto, внутри него с помощью margin auto центрируешь блок.

Эм, как-то так?

Не подходит. 
Футер должен быть "привязан" к низу экрана. Поэтому position: absolute у него. margin: auto - центрирует только по горизонтали. А надо и по-вертикали.
Это делается так:

Но тогда получается, что два абсолютно позиционированных элемента наезжают друг на друга при изменении размеров. Это раз.
Еще ты не учел, что если ты просто так все напишешь, то все три блока будут друг за другом, и не обязательно на весь экран. Там еще надо кучу хаков с height: 100% вставить.
В общем, этот вариант не подойдет.

Вам нужно только 3 элемента на странице?  Попробуйте превратить все это в таблицу свойствами CSS. 
Попробую примерчик написать...

Это сообщение отредактировал(а) Arantir - 26.11.2012, 19:36

Уххх...
Сочинил...
header - вверху, фиксированная высота. footer - внизу, фиксированная высота. блок - по центру вертикально/горизонтально, фиксированные ширина/высота.

Ей-богу, без фиксированных размеров это было бы почти нереально XD

Коротко об идее:
Берем 3 абсолютно позиционированных блока: хидер, футер и распорку. Хидер - вверху, футер - внизу. Распорка бсолютно спозиционирована по 50% и минус половина размеров сделана margin'ами.
Распорка имеет высоту: высота хидера + высота футера + высота центрального блока.
Цетральный блок помещаем внутрь распорки и сдвигаем его margin'ом вниз на высоту хидера.
Ставим для body минимальную допустимою высоту равную высоте распорки, которую мы вычислили ранее.

При сжатии страницы наш блок не зайдет на хидер из-за того, что распорка уже упрется в верх страницы. А на футер не зайдет, потому что будет достигнута минимальная высота страницы и отступ от низа до блока (равный высоте футера) уже не уменьшится.

Это сообщение отредактировал(а) Arantir - 26.11.2012, 19:36

Да, хорошая идея. Но я поступил проще.
Таблица (ширина и высота 100%) и три строки в ней. первая - хидер (с vertical-align: top), вторая - мой блок (c margin: auto и сама td vertical-align: middle), ну и соответственно footer (vertical-align: bottom).
Так я думаю проще. Но и твой вариант хорош. Держи плюс.

Guedda, хех, а я про таблицы как раз перед этим написал =))) Но в процессе как-то само пошло к моему ответу.
Но зависит от обстоятельств. Характер поведения ячеек таблиц не всегда позволяет их использовать. В данном случае вполне может быть, что так проще и без последствий. В моем варианте много "ручных" вычислений над размерами. При изменении высота блока надо будет менять в четырех местах размер.

Это сообщение отредактировал(а) Arantir - 26.11.2012, 20:20