Auto adjustable space between divs for 100% height - html

Question

I've prepared a mobile site, which has the right aspect ratio of images, but on some phones with bigger screens it's to short and after the footer I get white gap. I would prefer to add some DIVs between contents which they would auto stretch when needed.
I'm thinking of something like this:
<div id="wrapper">
<div id="header"></div>
<div id="content1"></div>
<div class="empty_gap"></div>
<div id="accordion"></div>
<div class="empty_gap"></div>
<div id="footer"></div>
</div>
The .empty_gap DIVs would get evenly height so the page would fit the screen height. How to get this done? Or do you have any other solution for such a situation when the page is to short to fill the entire mobile screen?
EDIT: I have to add one thing which I didn't think before it will cause a problem. None of these solutions are working for me, because I use jquery accordion, and when I execute $("#wrapper").outerHeight(); I get much bigger value than the screen size even when I have all panels collapsed. I guess that this is also the reason for flexible boxes that those solutions don't work too.
EDIT2: The JS solution is working now, I just needed to subtract the panel's content from the wrapper.

Answer 1

If you're OK with a JavaScript solution, try this:
Usually your divs should be wrapped with a div container. If it's not the case, then go ahead and add one like this:
<div id="wrapper">
<div id="header"></div>
<div id="content1"></div>
<div class="empty_gap"></div>
<div id="content2"></div>
<div class="empty_gap"></div>
<div id="footer"></div>
</div>
Then in JavaScript, calculate the height of this container div and subtract it from the window's height. That would be the total of all your gaps, so divided by the number of your gaps (2 in your example) to get the height of each gap. Something like this:
var totalGap = $(window).height() - $("#wrapper").outerHeight();
var gap = totalGap / 2; //2 is the number of your gaps
$(".empty_gap").css("height", gap);
Place this code in event for when the page finished loading. However, if your app supports rotation, then you'll have to place this code in the $(window).resize() event.

Answer 2

I suggest to use flexbox layout, for the equal space above and below #content2 you will just need to set #content2 { margin: auto 0; } to make it to work.
jsFiddle
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
margin: 0;
}
#content2 {
margin: auto 0;
}
<div id="header">header</div>
<div id="content1">content1</div>
<div id="content2">content2</div>
<div id="footer">footer</div>

Answer 3

If you do not need to support old browsers, it can be a job for flexible boxes.
Have a look here for browsers support (94.22% support when used jointly the with -webkit prefixed version).
You just have to set your container element to display: flex; with flex-direction: column; then add flex-grow: 1 (or anything > 0) to the .empty_gap elements.
#container {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
#header, #footer {
height: 25px;
background-color: red;
}
#content1, #content2 {
height: 50px;
background-color: blue;
}
.empty_gap {
background-color: yellow;
flex-grow: 1;
}
<div id="container">
<div id="header"></div>
<div id="content1"></div>
<div class="empty_gap"></div>
<div id="content2"></div>
<div class="empty_gap"></div>
<div id="footer"></div>
</div>