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

试试这个：

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')";
}

Answer 2

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

如何使一个 div 的高度取决于另一个 div 的高度？

谢谢大家。