Question

我正在使用bootstrap框架工作并使用jumbotron功能来创建我的标头。我有一个固定的导航，并希望jumbotron在缩放时是屏幕的完整高度和宽度。我在jumbotron下面有内容，我想要像常规一样滚动。就在有人开始使用全屏jumbotron时

html

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


   ... paragraph content ...      

</div>

CSS

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

Answer 1

有多种方法可以解决您的问题。最直接的方法是使用视口单元来缩放您的身高。它们supported至少是IE＆gt; = 9。

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

Answer 2

purii的回答是完全可以接受的，但是在定位jumbotron BootStrap类时，我选择稍微不同的方法：

<强> HTML：

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


   ... paragraph content ...      

</div>

<强> CSS：

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

正如你所看到的，我在＆＃34; jumobtron＆＃34;中放置了一个新的fullheight课程（当然可以是任何课程名称）。 <div>。然后我使用该类名和jumbotron类作为CSS样式的选择器。

这样做的好处是，它可以确保如果您以后选择在另一个页面上使用<div class="jumobtron">，您仍然可以在此类中使用BootStrap的默认样式。

全屏jumbotron，下面有内容

2 个答案: