全屏幕jumbotron与下面的内容 [英] Full screen jumbotron with content underneath

问题描述

我使用引导框架工作并使用jumbotron功能创建我的标题。我有一个固定的导航，并希望jumbotron在缩放时是屏幕的整个高度和宽度。我想要像常规那样可以滚动的jumbotron下面有内容。正当某人到达其全屏jumbotron网站时

html

 < ; div class =jumbotron row> 
< header> 
< div class ='navbar ........ 
 
 
 ...段落内容... 
 
< / DIV> 
  

css

  .jumbotron {
 position：relative; 
 background：url（'../ img / pexels-photo.jpeg'）no-repeat center center; 
 background-size：cover; 
身高：100％; 
 
  

解决方案

purii的答案完全可以接受，然而，在定位 jumbotron BootStrap类时，我会选择稍微不同的方法：

HTML：

 < div class =fullheight jumbotron row> 
< header> 
< div class ='navbar ........ 
 
 
 ...段落内容... 
 
< / DIV> 
  

CSS：

  .fullheight.jumbotron {
 position：relative; 
 background：url（'../ img / pexels-photo.jpeg'）no-repeat center center; 
 background-size：cover; 
最小高度：100vh; 
 
 
 
 
 
 $ b 
正如你所看到的，我放置了一个新的 fullheight  class（当然可以是任何类名），在jumobtron< div> 中。然后，我使用该类名称以及 jumbotron 类作为CSS样式的选择器。  
 
 
这样做的好处是可以确保如果您选择使用< div class =jumobtron> 在未来的另一页上，您仍然可以使用BootStrap的默认样式。  
I am using bootstrap frame work and using the jumbotron feature to create my header. I have a fixed navigation and want the jumbotron to be the full height and width of screen when scaled. I have content underneath the jumbotron that I want scrollable like regular. Just when someone gets to site its fullscreen 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%;
}

解决方案
purii's answer is perfectly acceptable, however I'd opt for a slightly different approach when targeting the jumbotron BootStrap class:

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;
}
As you can see I placed a new fullheight class (can be any class name of course) within the "jumobtron" <div>. I then used that class name along with the jumbotron class as the selector for CSS styling. 

The benefits of doing it this way is that it ensures that if you chose to use <div class="jumobtron"> on another page in the future, you can still use BootStrap's default styling for this class. 

                        
这篇关于全屏幕jumbotron与下面的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！