Tieskevo

Thanks Lindsey, that was very helpful. In the end this is what I came up with:
 
 
$(document).ready(function() { $(".checkanchor").click(function(){ setTimeout(function(){ if(window.location.hash) { var h = window.location.hash; window.location.hash = h; } },500); }); });

solved it with: http://flesler.blogspot.nl/2007/10/jquerylocalscroll-10.html

What I think you'll want to do is make sure your container has a min-height of 100%. you might have to give the body and html tags a height as well, since percentage height is always calculated from the parent's height.
 
so:
html { min-height:100%; } body { min-height:100%; } #container { min-height:100%; }  
great now your container is atleast as big as the window. If you're using percentages to scale other elements, they might get skewed as their parent got a new height. another good reason to scale other elements on width.
Next up, you're going to make sure your footer is always on the bottom of your container. As Lindsey said:
 
#footer { position:absolute; bottom:0; height:50px; /*added this as well */ }  
notice I gave the footer a fixed height. Why is that?
because we'll need it now. See since the footer is now absolutely positioned at the bottom of your container content might go underneath the footer, and we don't want that.
Thats why we're gonna use this height and set it was the padding-bottom for the element above it. Margins won't work. in your case this should be the section with the class ten columns.
 

.ten columns { padding-bottom:50px; /*footer height */; }  
Goodluck :]

picked this back up today. I basically detect first if the vw untis are supported by the browser, if they are not, then i substitute my own viewport formula for the units
 
$(document).ready(function() { var getVW = $("#vw-test"); var viewport = $(window); var newFont = window.innerWidth / 100 +"px" ; getVW.css({ width: "100vw" }); if (getVW.width() != viewport.width()) { document.body.style.fontSize=newFont; } });