Уравнивание высоты блока с помощью JavaScript
Вот вчера сидя на работе, верстал дизайн одной велокомпании, и столкнулся с проблемой, проблема уравнивания блока. Если не понятно, то сейчас все поясню.
У меня есть изображение, которое должно заливать центральный блок контейнера (<div id="container">) по оси -y- (background: repeat-y;). У этого блока есть минимальная высота, она равна двум высотам изображениям 326px (высота изображения = 163px) . Вот это изображение
И есть второй блок подвал (<div id="footer">), в котором находится я бы сказал ключевое изображение дизайна. Вот это изображение. Я думаю тут должно быть все понятно, эти изображения должны совпасть. совпадают они только тогда, блок кратен 163px.
вот так должно выглядеть, пример.
Вроде бы все просто, но тут у меня возникла загвоздка, если я добавляю текст блок начинается растягиватся, картинка повторяется, и мы видим что получается несовпадение изображения, а этого мне ой как не нужно. Пример
И тут в голову мне пришла идея, уравнивания блоков. Шаги которые нужно выполнит
- Получить высоту элемента с картинкой
- Получить остаток недорастянутого блока, кратность блока
- Уравнять блоки
Итак сразу пример, а теперь код.
Для начала скрипт, который обрабатывает документ
<script> function setHeight() { var box = document.getElementById("container").offsetHeight; var n_var = box % 163; if (n_var == 0) { } else { var h1 = box; var h2 = h1 + (163 - n_var); var content = document.getElementById("content"); content.style.height = h2 + "px"; } } </script>
Теперь пришла очередь для стилевого оформления
<style> * {padding:0; margin:0;} #container { max-width: 1280px; margin: 0 auto; min-height: 326px; height: auto !important; height: 652px; padding: 0 0px 0 0px; background:url(container-bg.png) repeat-y top center; } #content { width: 900px; margin: 0 auto; padding: 0 0 20px 0 } #footer { max-width: 1280px; height: 426px; background:url(footer.png) no-repeat center top; } </style>
Разметка
<div id="container"> <div id="content">Тут вы можете использовать произвольный контент</div> </div>
P.S. Если знаем другие способы, оставляем их в комментарии.
Спасибо за внимание