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