Question

我使用引导框架工作，并使用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

purii的答案是完全可以接受的，但是针对jumbotron引导类时，我会选择一个稍微不同的方法：

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; 
} 

正如你所看到的，我在“jumobtron”<div>中放置了一个新的fullheight类（当然可以是任何类名）。然后，我将该类名称与jumbotron类一起用作CSS样式的选择器。

这样做的好处是，它可以确保如果您将来在其他页面上选择使用<div class="jumobtron">，则仍然可以使用BootStrap的默认样式。

Answer 2

有多种方式来解决你的问题。最直接的将是使用视口单位来缩放你的身高。他们supported至少通过IE> = 9

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