Почему уменьшается высота блока?

Question

[nickostyle]

Есть два блока. В первом слайдер, во втором какой то текст. Блоки один под другим.
Задача: оба блока должны занимать всю высоту экрана. При этом после них идет контент страницы, так что речь идет именно о высоте вьюпорта. Блок со слайдером динамический, т.е. его размер может меняться в зависимости от настроек. Второй блок с текстом всегда должен занимать оставшуюся часть так, чтобы экран был заполнен. Т.е. своей высотой компенсировать изменение высоты слайдера.

<div id="masthead" style="height: 100vh; position: relative;">
<div class="rev_slider"></div>
<div class="green-zone"></div>
</div>

При помощи товарищей с тостера был написан такой код

jQuery(document).ready(function ($) {
	var slide = $('.rev_slider').height();   // Высота слайдера
	var	 body = $('#masthead').height();  	// Высота экрана
	var some = $('.green-zone'); 			// Блок B

	var percent = 100 / body; 				// Сколько процентов 1px
	var slidePercent = percent * slide;		// Сколько процент занимает слайдер
	var somePercent = 100 - slidePercent; 	// Сколько остается процентов блоку B

	$('.green-zone').height(somePercent / percent);
});

Вообщем то все работает. Для проверки вывел через alert все значения, калькуляция верная. Значение высот всех блоков верные. Но на деле у слайдера куда то пропадает 6 пикселей. То есть алерт выводит 600 пикселей, а я в фотошопе померял скриншот - 594 пикселя. И эти 6 белых пикселей вылазят мне белой полосой в самом низу.

Надо заметить, что в момент отображения алертов все нормально, но стоит мне закрыть последний алерт, появляется эта белая полоса внизу экрана высотой в 6 пикселей. Уже голову себе сломал, что это может быть.

Comments

[acspro]

Кинь линк, в дебагере посмотреть страницу

[Евгений Петров]

Предлагается копипастить код и создавать свою страницу?
Сделайте тест на том же jsfiddle.net

Answer 1

[acspro]

jQuery(document).ready(function ($) {
	var greenHeight=$('#masthead').height()-$('.rev_slider').outerHeight(true);   
	if (greenHeight>0)
		$('.green-zone').height(greenHeight);
		else 
			$('.green-zone').css{'display':'none'};
});