填充整个屏幕响应高度答案

【问题标题】：Fill Whole screen Responsive Height填充整个屏幕响应高度
【发布时间】：2015-06-16 13:49:09
【问题描述】：

我将如何从该网站http://www.theqcamera.com 或http://plugandplaydesign.co.uk（顶部的视频+图像）中获得效果，以便图像在任何屏幕尺寸上填满屏幕。我不确定这是否是响应高度，但我真的很想知道该怎么做。

【问题讨论】：

... 用什么语言？ HTML？ CSS？ Javascript？咖啡脚本？打字稿？爪哇？
我不介意让它看起来和做那些列出的网站所做的事情

标签： responsive-design resize height

【解决方案1】：

有几种方法可以做到这一点。最简单的方法是在 CSS 中使用 vh（垂直高度）。设置为 100vh 将使您的 div 为用于查看页面的屏幕高度的 100%。将其与设置为“覆盖”的背景图像和域上 100% 的宽度相结合，您应该一切顺利。

<body>
   <div class="container">
       <div class="div_1">
           content
       </div>
       <div class="div_2">
           other content
       </div>
   </div>
</body>

.div_1 {
    width: 100%;
    height: 100vh;
}
.div_2 {
    width: 100%;
    height: auto;
}

请注意：IE8 不支持 vh。如果您的项目需要支持 IE8，请使用 position:absolute;高度：100%；宽度：100%；边距：0；是一个稍微复杂但更向后兼容的答案。

【讨论】：

我能问一下内容区的内容吗
又是怎么知道浏览器大小的（我没用过vh
很抱歉造成了超长的延迟。您的两个屏幕的内容价值的东西放在内容部分。 100vh 与现代浏览器一起工作，以简单地确定页面加载时浏览器的高度。然后它使用该高度来确定您希望填充屏幕高度的 div 的高度。

【解决方案2】：

尝试使用 height 100% ， position absolute ， margin 0 auto 这就是我在我的网站上 100% 制作图片的方式 (http://www.dotto.be)

【讨论】：

我应该在我的css上写：.background{ Position:absolute;边距：0 自动；高度：100%； }
和 html 我应该放什么
在您的样式表中，您创建了一个与您为 div 指定的名称相同的类，因此“背景”这就是您应该在样式表中输入的内容：.background{ background: url(assets/images/17.gif); width: 100%; height: 100%; margin: 0 auto; position: absolute; background-size: cover; background-attachment: fixed; background-repeat: repeat-y; background-position: top center; } 这是什么的简短版本我的课看起来像
Css 很棒，但不幸的是图像
在css中没有加载所以我应该把它放在html中