Уравнивание высоты блока с помощью JavaScript

Вот вчера сидя на работе, верстал дизайн одной велокомпании, и столкнулся с проблемой, проблема уравнивания блока. Если не понятно, то сейчас все поясню.

У меня есть изображение, которое должно заливать центральный блок контейнера (<div id="container">) по оси -y- (background: repeat-y;). У этого блока есть минимальная высота, она равна двум высотам изображениям 326px (высота изображения = 163px) . Вот это изображение

container-bg

И есть второй блок подвал (<div id="footer">), в котором находится я бы сказал ключевое изображение дизайна. Вот это изображение. Я думаю тут должно быть все понятно, эти изображения должны совпасть. совпадают они только тогда, блок кратен 163px.

footer

вот так должно выглядеть, пример.

Вроде бы все просто, но тут у меня возникла загвоздка, если я добавляю текст блок начинается растягиватся, картинка повторяется, и мы видим что получается несовпадение изображения, а этого мне ой как не нужно. Пример

И тут в голову мне пришла идея, уравнивания блоков. Шаги которые нужно выполнит

  1. Получить высоту элемента с картинкой
  2. Получить остаток недорастянутого блока, кратность блока
  3. Уравнять блоки

Итак сразу пример, а теперь код.

Для начала скрипт, который обрабатывает документ

<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. Если знаем другие способы, оставляем их в комментарии.

Спасибо за внимание

Tagged , , , . Bookmark the permalink.

Также может быть интересно:

  • Ne?

    А тупо выравнять бг по низу никак?

  • admin

    Да в том то и проблема, что никак. Я же не зря за кратность написал.