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">

现在我必须在cat图像上设置很长的高度，以便容器中的背景图像（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

我提出了一个非常类似的解决方案：

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

谢谢大家。

使用css使重叠的div相等

2 个答案: