html - Bootstrap 3 主题效果

Question

这并不是我真正要问的如何做到这一点，而是一个关于产生效果的指针，我已经看到了一个示例 Bootstrap 主题，对于其他网站也不仅仅是 bootstrap。

Bootstrap 3 Theme

该网站的介绍会在所有屏幕尺寸上以各种方式填满浏览器窗口，而我一直难以实现这一点。解决这个问题的最佳方法是什么？为什么？

Answer 1

足够简单；您需要将 div(或您用来容纳全屏内容的其他元素)的高度设置为“100%”，但这需要相对到“something' 这就是为什么您还为 html(视口(viewport))和 body(内容)元素设置 height:100% 的原因。只要带有图像的 div 首先出现在您的 HTML 中，它就会按预期工作。

Demo Fiddle

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