jquery - div全高宽动态

Question

现在我尝试制作一个带有背景图像的 div，它在页面加载时填充整个视口(viewport)，并在需要时将所有其他页面内容向下推，这样当您加载页面 - 实现此功能的最佳方式是什么？

Answer 1

Demo Fiddle

应该这样做:

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

您需要将 div 的高度设置为 100%，但这需要与“某物”相关，这就是您还设置 height:100% 的原因html 和 body 元素。只要带有图像的 div 出现在您的 HTML 中的第一个位置，它就会按预期工作。