Высота окна для блоков
 

почему при таком коде, у первого блока высота нормальная, то есть во весь экран, а у других наблюдается погрешность, как исправить?

<div id="color1" class="section"></div>
<div id="color2" class="section"></div>
<div id="color3" class="section"></div>
<div id="color4" class="section"></div>

var sections = document.getElementsByClassName('section');
setSize();

function setSize(){
	for(var i = 0; i < sections.length; i++){
		sections[i].style.height = window.innerHeight + "px";
	}
}

accept,
сохранить значение высоты и его присваивать а не запрашивать новое значение всякий раз

а какая разница?? даже если так:

sections[i].style.height = 610 + "px";

все равно

я не говорю когда происходит resize окна браузера, я говорю при загрузке страницы, чтобы эти блоки располагались на всю высоту окна браузера, один за другим

accept,
смотрите макет danik.js, где это сделано без скриптов на одном css
http://jsfiddle.net/danya_postfactum/z8cLa59g/

может отступы у вас мешают margin: 0;
padding: 0;

нет, отступы убрал, все равно, вот весь код:

<style type="text/css">
        html, body {
		padding: 0; margin: 0;
		height: 100%;
		width: 100%;
	}
	.section{
		background: #2ECC71;
		height: 100%;
		width: 100%;
                position: relative;
	}
	#sec2 {
		background: #FDE3A7;
	}
	#sec3 {
		background: #F62459;
	}
	#sec4 {
		background: #663399;
	}
	#sec5 {
		background: #19B5FE;
	}
</style>

    <div id="sec1" class="section"></div>
	<div id="sec2" class="section"></div>
	<div id="sec3" class="section"></div>
	<div id="sec4" class="section"></div>
	<div id="sec5" class="section"></div>

прокручивайте страницу, чтобы понять, о чем я говорю

увы ничего не увидел

у всех блоков высота устанавливается, но при скролле один из-за рывка прокручивается слишком быстро, и появляется другой