Есть такая вёрстка дивами:
http://maestro-magnifico.ru/
В CSS прописано примерно следующее:
|
Код:
|
html {
height: 100%;
}
body {
height:100%;
background-image:url('images/bg.gif');
}
.main_border {
border:solid 1px #333333;
width: 90%;
height:99.7%; /* с запасом для бордеров */
margin:0 auto;
background-color:#FFFFFF;
min-width: 600px;
} |
Смысл всего этого - сделать центральный блок - main_border, который содержит все остальные блоки, в 100% по высоте. Я окрасил его светло-зелёным для наглядности. Так как вёрстка резиновая, вы можете попробовать сузить окно браузера по ширине и сразу увидите в чём проблема - футер уезжает вниз, вместе с текстом в центральном блоке (как им и положено), а высота main_border не меняется. Нужно сделать чтобы он всегда оставался по высоте окна при ресайзе. На сколько я понимаю, сделать это на чистом CSS невозможно, и тут нужен JavaScript. Хочу использовать jQuery для этого, с синтаксисом знаком в теории, на практике ещё не применял, так что, даже не представляю как это должно работать. Буду признателен за любые подсказки.