responsive design - CSS: 100% height relative to the outer of two surrounding div's? -

I was struggling with it all afternoon, so I thought I would ask for help ...

Actually, I have the following structure:

  & lt; Div id = "gallery" & gt; & Lt; Div class = "product" & gt; & Lt; Img ... /> & Lt; Div class = "caption" & gt; & Lt; P & gt; Some text & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "product" & gt; & Lt; Img ... /> & Lt; Div class = "caption" & gt; & Lt; P & gt; Some text & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; In short, I would like to receive the following:  
 
 External container (div # gallery) scales with browser window (height: 100  
 External container DIV # gallery (height : 100%, Width: Auto;), and thus make them responsive.  
 Each of the width of the inner container (Div.Product) tightens the image attached to it.  
 Captions (div.caption) are related to Dip Product "Full" (they Illustrations are overlapped from the background, but try it first: I could just write the following CSS:  
  div # gallery {status: relative;  height: 100%;; .} Img {height: 100%} width: auto;} div.caption {condition: full; width: 100%; ...}   
 In this way, div.product "static And the image will be located relative to the div # gallery. Unfortunately, I need to div.product to work with "relative" to div.caption, so ...  
  div # Gallery {status: relative; height: 100 %; ...} div.product {status: relative;} img {height: 100%; Width: auto;} div.caption {status: complete; Width: 100%; ...}   
 Hmm, div.caption now works, but the height of IMG is now relative to the div.product, which is not on the scale. So, let's join ...  
  div # gallery {status: relative; Height: 100%; ...} div.product {status: relative; Height: 100%; Width: auto;} img {height: 100%; Width: auto;} div.caption {status: complete; Width: 100%; ...}   
 Now, it should really work, should not it be !? well almost. There is still an oddity: when the size of the browser changes, the height of the div.product scales, as it should, but the width contained within the width remains constant on the original width of the image!  
 And this is the place where I 'm caught any thoughts?  
 Thanks a long time ago!  
 Edit: Now after the two suggestions, a  jsFiddle  position indicates:   
 
 
 I'm trying to follow your post, but there's a lot of information in it!  
 See that this is on the right track:  
  html, body {height: 100%; Width: 100%; Margin: 0; } # Gallery {Height: 100%; Width: 100%; }. Product {background: # 333; Height: 100%; Width: 100%; } .image {status: absolute; Background: # 777; Height: 100%; Width: 100%; }. Caption {background: RGBA (111, 444, 333, 1); Width: 100%; Height: 100%; Status: Completed; }