html - 使用 css 使叠加的 div 相等

Question

我有一个 div 覆盖另一个 div，如下所示:

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; 
}

我的 html 开头是这样的:

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

现在我必须将猫图像的高度设置得非常长，以便容器 (book.png) 中的背景图像将填满内容区域。

问题是在不同的浏览器上进行测试时...有时 book.png 背景会超过内容长度，在底部多留几英寸。

有什么方法可以使用 css 使内容和容器高度相同，而不必调整图像高度？

这是工作示例:http://www.scratchprogramming.org

Answer 1

我想出了一个与此非常相似的解决方案:

How to make one div's height depended of another div's height?

谢谢大家。