製作疊加的div用css

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?

謝謝大家。

Answer 2

試試這個：

body { 
    background: url('http://www.scratchprogramming.org/img/book.png') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.scratchprogramming.org/img/book.png', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.scratchprogramming.org/img/book.png', sizingMethod='scale')"; 
}