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***
<div id="vh12">
<div id="vh1"></div>
<div id="vh2"></div>
</div>
***end of html***

***start of css***


body {
margin:0px;
padding:0px;
height:100% auto;
}


#vh12 {
position:relative;
width:696px;
height:200px;
z-index:1;
}

#vh1 {position:relative;
width:110px;
height:100%;
float:left;
z-index:1;
background-image: url(h1stretch.jpg);
}

#vh2 {position:relative;
width:586px;
height:100%;
float:right;
z-index:1;
background-image: url(h2stretch.jpg);
}

***end of css***

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***
<div id="vh12">
<div id="vh1"></div>
<div id="vh2"></div>
</div>
***end of html***

***start of css***


body {
margin:0px;
padding:0px;
height:100% auto;
}


#vh12 {
position:relative;
width:696px;
height:200px;
z-index:1;
}

#vh1 {position:relative;
width:110px;
height:100%;
float:left;
z-index:1;
background-image: url(h1stretch.jpg);
}

#vh2 {position:relative;
width:586px;
height:100%;
float:right;
z-index:1;
background-image: url(h2stretch.jpg);
}

***end of css***


Umm, correct me if I'm wrong but it looks like vh12 is actually set to 200px, not 100%.

I know but when I change it to 100% it dosnt work, it was set to 200px becuase It was showing that its child divs fill up 100% of it when it is 200px.
My point is, divs within divs are filling up 100% but when parent div is set to 100% it dosnt take up 100% height of body.

Try this mate, not tested, but should work if memory serves me right ;)


body, html {
height: 100%
}

* html #vh12 {
height:100%;
}

#vh12 {
position:relative;
width:696px;
min-height:100%;
z-index:1;
}


Gary