Question

我目前有一个动态标题图片，可以调整大小到浏览器的大小。（完全像这样：http://www.theadventurists.com/）但目前它与我的其他内容重叠。我真正想要的是占据屏幕的图像并向下滚动以查看内容。

我链接的网站，如何在不重叠内容的情况下执行此操作？有JS涉及吗？我最接近复制的是让下面的div有保证金最高的100％。但是，由于当浏览器具有特定尺寸时边距变得太大，这是一个糟糕的解决方法。

<div id="test_bg">
</div>



<div id="page">
    <p>This is the content</p>
</div>   

    #test_bg{

    background-color:blue;
position:absolute;
background-size: cover;
background-repeat: no-repeat;  
top: 0;
left: 0;
bottom:0;
right:0;
}

#page{

    background-color:red;
 margin-top:100%;   
}

http://jsfiddle.net/9Trb2/9/蓝色是图像，红色是内容。

Answer 1

你设置保证金最高100％并不是最好的方法。您的JSFiddle存在一些问题 - 后台URL指向的是一个imgur页面，而不是实际的JPG，所以我更改了它。此外，你有css选择器page而需要#page才能正确定位div。

我解决问题的方法是将#test_bg高度更改为100％并删除绝对定位。通过取消绝对定位，#test_bg成为文档流程的一部分，下一个div将自动定位在它的正下方，这正是您想要的。为了能够将div设置为100％高度，您需要做的另一件事是将body和html高度设置为100％ - 否则您将看到该设置#test_bg到身高= 100％不会做任何事情。这是JSFiddle。

#test_bg{
  background-image:url(http://i.imgur.com/GgfpgA3.jpg);
  background-size: cover;
  background-repeat: no-repeat;  
  height: 100%;
}

html,body{
  height: 100%;
}

#page{
  height:400px;
  width:400px;
  background-color:red;  
}

动态调整图像重叠在div下方

1 个答案: