nielsdoorn/balk.css

## balk.css
body, html {
	height: 100%;
}

body {
	padding: 0;
	margin: 0;
}

#header {
	background-color: red;
	width: 100%;
	position: absolute;
}

#balk {
	background-color: black;
	color: white;
	height: 40px;
	position: absolute;
	width: 100%;
}

#container {
	background-color: blue;
	position: absolute;
}

## balk.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Balk</title>
	<link rel="stylesheet" href="balk.css">
	<script src="balk.js"></script>
</head>
<body>

	<div id="header">plaatje</div>
	<div id="balk">balk</div>
	<div id="container">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit culpa expedita fuga aliquid blanditiis numquam recusandae itaque quidem sed doloremque ex ab sapiente dicta velit a laudantium rem exercitationem mollitia!</p>
		<p>Dolore minus illum veniam delectus commodi reprehenderit necessitatibus perspiciatis illo sed sequi. Deleniti non laudantium! Tempora quaerat placeat minus dolor ipsum perferendis labore quidem explicabo totam velit rerum quam beatae!</p>
		<p>Dolor obcaecati accusamus incidunt cum iure molestias pariatur ratione facere blanditiis vel voluptatibus nesciunt doloremque illum error maiores facilis earum commodi iste aspernatur optio repellendus ducimus explicabo nisi nostrum natus!</p>
		<p>Consequuntur quod officia perspiciatis quo fuga tenetur fugit natus ducimus in quisquam laborum voluptatibus nobis ullam nisi minima cupiditate distinctio autem enim vero quasi nihil accusantium pariatur deleniti hic eos?</p>
		<p>A aspernatur esse velit voluptates unde ex provident sint deleniti perspiciatis doloribus ipsa magni! Commodi enim voluptate quas molestias ea fugit odio ipsum itaque? Laboriosam iusto aperiam aspernatur accusamus commodi.</p>
		<p>Impedit doloremque corporis optio reiciendis earum placeat possimus ut voluptas labore repellat dolore aut at nemo hic officia qui aperiam totam excepturi quidem recusandae laboriosam tempore fugiat ducimus distinctio minus.</p>
		<p>Quibusdam distinctio enim aliquam inventore eos nam recusandae ipsa cumque necessitatibus maiores sed illum nihil voluptates facere ducimus pariatur quos corporis laborum harum nobis odit architecto eius repellat iusto laboriosam!</p>
		<p>Aliquam qui dicta similique maxime nobis architecto provident facere cumque est dolores. Labore explicabo debitis iure quibusdam tempore fugit modi quae rem ea sunt. Autem sint inventore voluptas expedita itaque.</p>
		<p>Sed omnis nostrum tenetur facilis repudiandae eaque facere officia modi neque et voluptate explicabo obcaecati cum ratione quisquam aut libero necessitatibus. Iure praesentium sequi est voluptate rerum delectus atque fugit.</p>
		<p>Ut vitae consequuntur excepturi repellendus corporis sapiente nam a repudiandae aliquid quidem! Cupiditate vel molestiae a odit distinctio et repudiandae ipsa numquam magni nisi ratione qui necessitatibus porro sapiente dolores!</p>
		<p>Vel accusantium quasi neque maxime quidem tenetur qui quis delectus pariatur est fugiat doloremque alias autem laboriosam optio quo rem dolorum praesentium voluptates quam voluptatibus nam vero vitae debitis ullam.</p>
		<p>Repellat porro ut obcaecati reprehenderit modi voluptatibus perspiciatis quisquam praesentium laborum sint corporis officiis iste cumque sed non enim quod! Itaque eligendi velit sed inventore expedita ex incidunt deleniti quas.</p>
		<p>In distinctio ex deleniti architecto reiciendis ab nam quis nostrum ducimus necessitatibus labore ullam perferendis odit itaque dolorem repellat vel inventore assumenda doloremque accusantium! Voluptatem ipsum rerum quis doloremque possimus.</p>
		<p>Sequi a earum labore itaque doloribus magnam beatae exercitationem cum vel natus amet aperiam magni ullam! Sequi eligendi nam eos repellat rem facilis deleniti quam totam neque quidem! Vitae magni.</p>
		<p>Officia recusandae alias consequuntur asperiores aliquid accusantium quas aperiam impedit rem perspiciatis similique vitae ab quaerat ipsa vero unde quod quia hic nulla omnis dolorem delectus voluptates illum fuga culpa.</p>
		<p>Expedita optio veritatis possimus nam ex tenetur eligendi ipsum nisi. Natus neque quis maxime repellat. Harum velit in voluptatum natus nobis exercitationem nemo numquam illo veniam debitis at blanditiis cum.</p>
		<p>Quam doloribus numquam aliquam ducimus harum ea ut voluptatum officia veniam natus saepe optio molestiae iusto quisquam a repellat laudantium quod quis eligendi vero quo repudiandae reiciendis omnis nam neque?</p>
		<p>Exercitationem sequi perspiciatis explicabo dignissimos ipsa enim expedita praesentium ducimus odio numquam neque similique temporibus debitis rerum molestiae aliquid unde doloribus provident repudiandae deserunt repellat fugit eos harum. Molestiae nihil!</p>
		<p>Reprehenderit doloribus magnam ullam quos soluta itaque assumenda dolores est ducimus similique consequatur dolore enim voluptatem totam minus doloremque eius modi saepe voluptatum maxime. Quaerat porro hic eveniet! Iusto incidunt.</p>
		<p>Sed earum placeat! Voluptate reprehenderit consectetur dolorum aut at qui dolore tempora omnis ipsam odit perspiciatis saepe praesentium quos enim deserunt dolores deleniti ducimus eum possimus eligendi eveniet officia magni.</p>
	</div>

</body>
</html>

## balk.js
window.onload = function() {
	window.onresize = resize;
	resize();
}

function resize() {
	console.log(window.innerHeight);
	var balkje = document.querySelector("#balk");
	balkje.style.top = (window.innerHeight - 40) + 'px';
	var container = document.querySelector("#container");
	container.style.top = window.innerHeight + 'px';
	var header = document.querySelector("#header");
	header.style.height = window.innerHeight + 'px';
}
	body, html {
	height: 100%;
	}

	body {
	padding: 0;
	margin: 0;
	}

	#header {
	background-color: red;
	width: 100%;
	position: absolute;
	}

	#balk {
	background-color: black;
	color: white;
	height: 40px;
	position: absolute;
	width: 100%;
	}

	#container {
	background-color: blue;
	position: absolute;
	}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Balk</title>
	<link rel="stylesheet" href="balk.css">
	<script src="balk.js"></script>
	</head>
	<body>

	<div id="header">plaatje</div>
	<div id="balk">balk</div>
	<div id="container">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit culpa expedita fuga aliquid blanditiis numquam recusandae itaque quidem sed doloremque ex ab sapiente dicta velit a laudantium rem exercitationem mollitia!</p>
	<p>Dolore minus illum veniam delectus commodi reprehenderit necessitatibus perspiciatis illo sed sequi. Deleniti non laudantium! Tempora quaerat placeat minus dolor ipsum perferendis labore quidem explicabo totam velit rerum quam beatae!</p>
	<p>Dolor obcaecati accusamus incidunt cum iure molestias pariatur ratione facere blanditiis vel voluptatibus nesciunt doloremque illum error maiores facilis earum commodi iste aspernatur optio repellendus ducimus explicabo nisi nostrum natus!</p>
	<p>Consequuntur quod officia perspiciatis quo fuga tenetur fugit natus ducimus in quisquam laborum voluptatibus nobis ullam nisi minima cupiditate distinctio autem enim vero quasi nihil accusantium pariatur deleniti hic eos?</p>
	<p>A aspernatur esse velit voluptates unde ex provident sint deleniti perspiciatis doloribus ipsa magni! Commodi enim voluptate quas molestias ea fugit odio ipsum itaque? Laboriosam iusto aperiam aspernatur accusamus commodi.</p>
	<p>Impedit doloremque corporis optio reiciendis earum placeat possimus ut voluptas labore repellat dolore aut at nemo hic officia qui aperiam totam excepturi quidem recusandae laboriosam tempore fugiat ducimus distinctio minus.</p>
	<p>Quibusdam distinctio enim aliquam inventore eos nam recusandae ipsa cumque necessitatibus maiores sed illum nihil voluptates facere ducimus pariatur quos corporis laborum harum nobis odit architecto eius repellat iusto laboriosam!</p>
	<p>Aliquam qui dicta similique maxime nobis architecto provident facere cumque est dolores. Labore explicabo debitis iure quibusdam tempore fugit modi quae rem ea sunt. Autem sint inventore voluptas expedita itaque.</p>
	<p>Sed omnis nostrum tenetur facilis repudiandae eaque facere officia modi neque et voluptate explicabo obcaecati cum ratione quisquam aut libero necessitatibus. Iure praesentium sequi est voluptate rerum delectus atque fugit.</p>
	<p>Ut vitae consequuntur excepturi repellendus corporis sapiente nam a repudiandae aliquid quidem! Cupiditate vel molestiae a odit distinctio et repudiandae ipsa numquam magni nisi ratione qui necessitatibus porro sapiente dolores!</p>
	<p>Vel accusantium quasi neque maxime quidem tenetur qui quis delectus pariatur est fugiat doloremque alias autem laboriosam optio quo rem dolorum praesentium voluptates quam voluptatibus nam vero vitae debitis ullam.</p>
	<p>Repellat porro ut obcaecati reprehenderit modi voluptatibus perspiciatis quisquam praesentium laborum sint corporis officiis iste cumque sed non enim quod! Itaque eligendi velit sed inventore expedita ex incidunt deleniti quas.</p>
	<p>In distinctio ex deleniti architecto reiciendis ab nam quis nostrum ducimus necessitatibus labore ullam perferendis odit itaque dolorem repellat vel inventore assumenda doloremque accusantium! Voluptatem ipsum rerum quis doloremque possimus.</p>
	<p>Sequi a earum labore itaque doloribus magnam beatae exercitationem cum vel natus amet aperiam magni ullam! Sequi eligendi nam eos repellat rem facilis deleniti quam totam neque quidem! Vitae magni.</p>
	<p>Officia recusandae alias consequuntur asperiores aliquid accusantium quas aperiam impedit rem perspiciatis similique vitae ab quaerat ipsa vero unde quod quia hic nulla omnis dolorem delectus voluptates illum fuga culpa.</p>
	<p>Expedita optio veritatis possimus nam ex tenetur eligendi ipsum nisi. Natus neque quis maxime repellat. Harum velit in voluptatum natus nobis exercitationem nemo numquam illo veniam debitis at blanditiis cum.</p>
	<p>Quam doloribus numquam aliquam ducimus harum ea ut voluptatum officia veniam natus saepe optio molestiae iusto quisquam a repellat laudantium quod quis eligendi vero quo repudiandae reiciendis omnis nam neque?</p>
	<p>Exercitationem sequi perspiciatis explicabo dignissimos ipsa enim expedita praesentium ducimus odio numquam neque similique temporibus debitis rerum molestiae aliquid unde doloribus provident repudiandae deserunt repellat fugit eos harum. Molestiae nihil!</p>
	<p>Reprehenderit doloribus magnam ullam quos soluta itaque assumenda dolores est ducimus similique consequatur dolore enim voluptatem totam minus doloremque eius modi saepe voluptatum maxime. Quaerat porro hic eveniet! Iusto incidunt.</p>
	<p>Sed earum placeat! Voluptate reprehenderit consectetur dolorum aut at qui dolore tempora omnis ipsam odit perspiciatis saepe praesentium quos enim deserunt dolores deleniti ducimus eum possimus eligendi eveniet officia magni.</p>
	</div>

	</body>
	</html>
	window.onload = function() {
	window.onresize = resize;
	resize();
	}

	function resize() {
	console.log(window.innerHeight);
	var balkje = document.querySelector("#balk");
	balkje.style.top = (window.innerHeight - 40) + 'px';
	var container = document.querySelector("#container");
	container.style.top = window.innerHeight + 'px';
	var header = document.querySelector("#header");
	header.style.height = window.innerHeight + 'px';
	}