If I understand correctly then you can't do what you are trying to do. You cannot have multiple elements stretching down to 100% in css - only tables cells can do that (sometimes).
Apart from the height:100% in html and body you cannot use height:100% anywhere else and you can only use min-height:100% on the first wrapper on the page and nowhere else either.
In essence the first min-height:100% element creates the 100% height effect which it can achieve via the 100% height set on html and body. Further nested elements cannot achieve any height based on this min-height element because that will collapse to height:auto.
You cannot use height:100% again because that would mean the layout would never grow and you would be trapped forever within the initial viewport.
It's a catch 22 situation and cannot be done like you have tried
Remove all the height:100% from your code apart from the ones that are used for html and body.
Use min-height:100% on the first wrapper only.
You have one shot at creating a 100% initial layout and it all has to be done on that first wrapper. If you want the white background to travel down the page to the bottom then you would need to add a white background to the image that creates the borders.
e.g. This one:
At present it has a gray background but if you changed it to white then it would travel to the bottom.
It actually seems to me that you are looking for a sticky footer effect and that is shown in this example.
Apologies If this was not what you were trying to do