Html 全屏jumbotron，下方有内容

我正在使用引导框架，并使用jumbotron特性来创建我的标题。我有一个固定的导航，希望jumbotron在缩放时是屏幕的全高全宽。我在jumbotron下面有我想要像常规一样滚动的内容。就在有人进入网站的时候，它的全屏巨无霸

html

---

有多种方法可以解决您的问题。最直接的方法是使用视口单位来缩放高度。它们至少比IE>=9

.jumbotron {
  position: relative;
  background: url('../img/pexels-photo.jpeg') no-repeat center center;
  background-size: cover;
  min-height:100vh;
}

---

Puri的答案是完全可以接受的，但是在针对

jumbotron

BootStrap类时，我会选择稍微不同的方法：

HTML:

<div class="fullheight jumbotron row">
    <header>
        <div class='navbar ........


   ... paragraph content ...      

</div>

.fullheight.jumbotron {
  position: relative;
  background: url('../img/pexels-photo.jpeg') no-repeat center center;
  background-size: cover;
  min-height:100vh;
}

如您所见，我在“jumobtron”

中放置了一个新的

fullheight

类（当然可以是任何类名）。然后，我将该类名与

jumbotron

类一起用作CSS样式的选择器

---

这样做的好处是，它确保了如果您以后选择在另一个页面上使用

，您仍然可以为该类使用引导的默认样式

嗯，你有

身高：100%你期望什么？好吧，我把它放进去，它不会达到100%，如果我把身体设置为100%高度，我会失去所有的可伸缩性
<div class="fullheight jumbotron row">
    <header>
        <div class='navbar ........


   ... paragraph content ...      

</div>

.fullheight.jumbotron {
  position: relative;
  background: url('../img/pexels-photo.jpeg') no-repeat center center;
  background-size: cover;
  min-height:100vh;
}