JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fodiv">
<div id="okozep"></div>
<div id="teteje">
id="teteje"

</div>

<div id="alja">
<img src="http://www.zwani.com/graphics/hello/images/10.gif" style="margin:20px;" />
<br />

</div>
</div><!--fodiv vége-->

CSS

html, body {
height: 100%;
margin:0 auto;
padding:0;
min-width:1000px;
background-color: #0f0;
}

#fodiv {
background-color: #ccc;
width:100%;
min-height: 100%;
position:relative;

margin:0 auto;
overflow:auto;
}

#teteje {
width: 980px;
position: relative;
margin:0 auto;
}

#alja    {
position:absolute;
bottom:0;
width:100%;
background: #080;

}

#okozep { 
position:absolute; 
top:0;
bottom:100px;
left:50%;
right:50%;
margin-left:-490px;
margin-right:-490px;
background-color: #00f;
}

JavaScript

magassag = document.getElementById('alja').offsetHeight;
ss = magassag + 20;
document.getElementById('teteje').style.marginBottom = ss + 'px';
window.onresize = function() {
magassag = document.getElementById('alja').offsetHeight;
ss = magassag + 20;
document.getElementById('teteje').style.marginBottom = ss + 'px';
}