html - 如何使我的网页背景封面固定为 css 中的全尺寸页面？

Question

我有以下 CSS 代码:

.hero {
    position: relative;
    padding: 60px 0 60px 0;
    min-height: 900px;

    background: rgb(40, 70, 102) url('../img/hero-01.jpg') no-repeat center center;
    background-size: cover;
    color: #fff;
}

这使得覆盖宽度为 100%，但高度仅为 900px。我尝试添加 height: 100% 但这没有用。到目前为止，网页看起来像这样 http://i.imgur.com/RMyIO4Y.jpg当用户将浏览器调整为全屏时，我想让视频部分不可见。我怎样才能做到这一点？ 谢谢。

Answer 1

你也可以设置高度

height: 100vh;

http://caniuse.com/#feat=viewport-units

Hero 模板的 CSS 示例:

.hero {
  position: relative;
  padding: 60px 0 60px 0;
  min-height: 100vh;
  background: rgb(40, 70, 102) url('../img/hero-01.jpg') no-repeat center center;
  background-size: cover;
  color: #fff;
}