为什么 min-height 在背景上不起作用？答案

【问题标题】：Why is min-height not working on background?为什么 min-height 在背景上不起作用？
【发布时间】：2017-03-24 23:38:37
【问题描述】：

我已经为 div 类添加了背景。我想要的是图像高度始终与浏览器窗口具有相同的高度，我试图通过 min-height= 100% 来实现。虽然我没有让它工作..有什么建议吗？

HTML：

<div id="top" class="jumbotron">
</div>

CSS：

.jumbotron {
    background: no-repeat center center url('top.jpg');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
    margin: 0px;
}

【问题讨论】：

您可以放心地删除前缀...当然，除非您想支持 0.2% 的运行过时浏览器的人；）caniuse.com/#search=background-size

标签： html css image background height

【解决方案1】：

body 和 html 必须填充 100% 的高度：

html, body {
    height: 100%
}

【讨论】：

仍然不起作用..仅显示图像的顶部 ~100 px。
你能发个小提琴吗？
jsfiddle.net/jonelm01/znu8k7qn 感谢帮助！刚开始编码
html需要同样的100%高度规则
欢迎您！请将问题标记为已解决；）

【解决方案2】：

将此添加到您的 jumbotron 类中：

min-height: 100vh;

工作小提琴：https://jsfiddle.net/dgo3sz0a/

【讨论】：