Div全高和动态

Question

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

Answer 1

演示小提琴

应该这样做：

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

您需要将div的高度设置为100％，但这需要相对于“某物”，这就是为什么还要将html和body元素设置为height:100%的原因。 只要带有图片的div首先出现在您的HTML中，它就会按预期工作。