html - Making overlaying divs equal using css -

i have 1 div overlaying div follows:

div.container {      position: relative;     min-height: 100%;     margin:0;     padding:0;      background:url('http://www.scratchprogramming.org/img/book.png');        background-repeat:no-repeat;     background-attachment:fixed;      background-position: 62% 70%;      overflow:hidden;  }   div.content {      position: absolute;      min-height: 100%;      margin:0;     padding:0;      top: 0;      left: 0;     width:100%;      z-index:10;      overflow:hidden;  } 

my html starts out this:

<div class="container">     <p id="catimage">         <img src="img/scratchcat.png" alt="cat" />     </p> </div><!--container-->   <div  class="content"> 

now had set height on cat image long background image in container (book.png) fill content area.

the problem when testing on different browsers... somtimes book.png background goes on content length, leaving couple of inches on bottom.

is there way can make content , container height same using css , not having play around image height ?

here working example: http://www.scratchprogramming.org

i came solution similar this:

how make 1 div's height depended of div's height?

thanks, everyone.