为什么min-height不能在背景上工作？

Question

我已经为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;
}

Answer 1

将此添加到您的jumbotron类：

min-height: 100vh;

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

Answer 2

正文和html必须填充100％的高度：

html, body {
    height: 100%
}