Div全高和动态

Question

现在，我尝试制作一个带有背景图像的div，以填充页面加载时的整个视口，并在需要时将所有其他页面内容下推，以便您在加载页面时只看到带有图像的div-这是什么最好的方法来使这个工作？

Answer 1

Demo Fiddle

This should do it:

html, body{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  position:relative;
}
#imgDiv{
  position:relative;
  height:100%;
  background-image:url(myImage.png);
}

You need to set the height of the div to 100%, but this needs to be relative to 'something' which is why you also set height:100% for the html and body elements. As long as the div with the image appears first in your HTML, it will work as anticipated.