Html 动态调整DIV下重叠图像的大小

我目前有一个动态标题图像，可根据浏览器的大小调整大小。（与此完全相同：）但目前它与我的其他内容重叠。我真正想要的是图像占据屏幕并向下滚动以查看内容

我链接的网站，他们如何做到这一点而不重叠的内容？是否涉及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%;   
}

这就是内容

#测试{
背景颜色：蓝色；
位置：绝对位置；
背景尺寸：封面；
背景重复：无重复；
排名：0；
左：0；
底部：0；
右：0；
}
#页面{
背景色：红色；
利润率最高：100%；
}

---

蓝色是图像，红色是内容。

你说得对，将页边距设置为100%并不是最好的方法。您的JSFIDLE有几个问题-背景URL指向一个imgur页面，而不是实际的JPG，所以我改变了这一点。另外，您还有css选择器

页面

，它需要是

#页面

，才能正确定位div

我解决您问题的方法是将

#test_bg

高度更改为100%，并删除绝对定位。通过取消绝对定位，

#test_bg

成为文档流的一部分，下一个div将自动定位在它的正下方，这正是您想要的。要将div设置为100%高度，您需要做的另一件事是将

主体

和

html

高度设置为100%——否则您会看到将

\test\u bg

设置为高度=100%不会起任何作用。这是我的建议

---

太好了，它能用。我以前试过这个方法，但没有把身高定在100%。当你回答这个问题时，我注意到了JSFIDLE上的错误，哎呀。谢谢你的帮助。

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