Html 修复了Jumbotron图像-列溢出？

我终于想出了如何使jumbotron图像适合用户浏览器的整个宽度和高度：

.jumbotron{
背景：url（images/yelllow.png）无重复中心；
位置：固定；
排名：0；
左：0；
最小宽度：100%；
最小高度：100%；
}

现在，当我添加另一个section

divclass=row

时，在jumbotron图像下面不显示列。相反，它们显示在页面顶部，并与jumbotron文本重叠。JS小提琴：

我隔离了上面的每个CSS属性，发现

position:fixed

导致了这种情况的发生。当我移除

position:fixed

时，列会像应该的那样排列在下面，但是jumbotron图像现在变小了，不适合屏幕

有人能准确地识别或解释为什么

position:fixed

会导致其他元素无法正确定位吗？我如何使jumbotron标题适合页面的宽度和高度，而其余内容显示在下面

引导示例
测验
Lorem ipsum Door sit amet，是一位杰出的献身者

第1栏
我爱你，我爱你，我爱你

但是，我们必须尽可能少地进行实验

第2栏
我爱你，我爱你，我爱你

但是，我们必须尽可能少地进行实验

第3栏
我爱你，我爱你，我爱你

但是，我们必须尽可能少地进行实验

在容器中移动jumbotron，并给它一行和全宽列

测验
Lorem ipsum Door sit amet，是一位杰出的献身者

第1栏
...

这就是你需要的吗

.jumbotron {
    background: url(images/yelllow.png) no-repeat center;
    top: 0; 
    left: 0; 
    min-width: 100%;
    min-height: 100vh;
}

拨弄

---

当对任何元素使用“位置：固定”时，必须对其后面的元素使用“页边距顶部”。在本例中，必须为类行使用边距顶部。因为固定定位图元之后的图元将从固定图元的顶部位置开始

.jumbotron {
    background: url(images/yelllow.png) no-repeat center;
    position: fixed; 
    top: 0; 
    left: 0; 
    min-width: 100%;
    min-height: 100%;
}
.row {
    margin-top:300px;
}

---

很抱歉，前面没有提到这一点，但我想让jumbotron同时适应浏览器窗口的高度和宽度。您可以为jumbotron提供一个自己的容器，但使用的容器流体使用100%的浏览器宽度，而容器是100%的父级宽度。我的回答不应该让图片变成全浏览器大小，我想你在vanburenx的帖子上是这么说的。对我来说，你也可以尝试将bootstrap的img responsive类添加到你的图像中，以便它能够正确地调整大小。是的，这正是我想要的。谢谢你把我介绍给vh。我去掉了顶部：0，留下：0，它仍然有相同的效果-有什么理由把它保留在那里吗？

.jumbotron {
    background: url(images/yelllow.png) no-repeat center;
    position: fixed; 
    top: 0; 
    left: 0; 
    min-width: 100%;
    min-height: 100%;
}
.row {
    margin-top:300px;
}