Уххх...
Сочинил...
header - вверху, фиксированная высота. footer - внизу, фиксированная высота. блок - по центру вертикально/горизонтально, фиксированные ширина/высота.| Код |
<!DOCTYPE html>
<html>
<head>
<title>Блок по центру, не перекрывающий header и footer © Арантир</title>
<style>
*
{
margin: 0px;
padding: 0px;
}
html
{
min-height: 100%;
position: relative;
}
body
{
min-height: 400px;
}
#top
{
background: rgba(0, 0, 255, 0.2);
width: 100%;
height: 100px;
position: absolute;
top: 0px;
}
#center
{
background: rgba(255, 0, 0, 0);
width: 300px;
height: 400px;
margin: 0px auto;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -150px;
}
#block
{
background: rgba(255, 0, 0, 0.2);
width: 300px;
height: 200px;
margin: 0px auto;
margin-top: 100px;
}
#bottom
{
background: rgba(0, 255, 0, 0.2);
width: 100%;
height: 100px;
position: absolute;
bottom: 0px;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="center">
<div id="block"></div>
</div>
<div id="bottom"></div>
</body>
</html>
|
Ей-богу, без фиксированных размеров это было бы почти нереально XD
Коротко об идее:
Берем 3 абсолютно позиционированных блока: хидер, футер и распорку. Хидер - вверху, футер - внизу. Распорка бсолютно спозиционирована по 50% и минус половина размеров сделана margin'ами.
Распорка имеет высоту: высота хидера + высота футера + высота центрального блока.
Цетральный блок помещаем внутрь распорки и сдвигаем его margin'ом вниз на высоту хидера.
Ставим для body минимальную допустимою высоту равную высоте распорки, которую мы вычислили ранее.
При сжатии страницы наш блок не зайдет на хидер из-за того, что распорка уже упрется в верх страницы. А на футер не зайдет, потому что будет достигнута минимальная высота страницы и отступ от низа до блока (равный высоте футера) уже не уменьшится. |
