div 100% height of body not working
It seems 100% height of 2 divs is filling up their parent div correctly, but that parent div's 100% is not filling 100% height of body.
vh1 + vh2 have height of 100% filling up containing div (vh12) of 200px correctly.
When height of the parent block (vh12) changes, vh1 + vh2, fill up 100% of its height accordingly.
However when I set vh12 to 100% (which is what I really want) I expect vh12's height to be 100% of its own parent block (body) which is 100%.
Thus sub blocks vh1 + vh2 should fill up their parent vh12 which is 100% height of body which is 100% height of the browser window,
thus vh1 + vh2 will fill up 100% height of the browser window.
It is not working, when I set vh12 to be a % value for height its sub containers only display 1 tile of the background images.
So basically, vh1 + vh2's 100% height of their parent div is working but vh12's 100% of its parent(body) is not working.
I belive the problem is either in body styles or vh12 styles.
I have experimented with min-height, and background repeat but they seemed to have no effect.
//note only the code relavent to my problem is shown, I am pretty sure all the html+css code I left out will not be neccessary for you to see//
***start of html***
***end of html***
***start of css***
***end of css***