Kombinieren Nav und Jumbotron

Question

Ich versuche, die Navigation und Jumbotron div s so zu kombinieren, dass beide die ganze Seite umfassen können (100vh) und nicht weiter gehen. Im Wesentlichen möchte ich sowohl die Navigation als auch das Jumbotron, aber ich möchte, dass die Elemente die ganze Seite ausfüllen, ohne scrollbar zu sein.

Momentan hat die Navigation eine feste Höhe und damit auch das Jumbotron. Sehen Sie es sich hier an (https://jsfiddle.net/orna9gz8/), obwohl JSFiddle nicht groß genug ist, um zu sehen, dass alles über die Seite hinausgeht. Einige Dinge, die ich versucht, aber hat nicht funktioniert:

• Ich habe versucht, die Standard-Bootstrap-Marge zwischen der Navigation und jumbotron zu entfernen, aber es die jumbotron geht noch über die Seite.

• Ich versuchte Einstellung margin-top zu -10% und dies löste das Problem vorübergehend (alles passt jetzt auf eine Seite), aber das scheint nicht auf kleineren Geräten zu arbeiten. Dies ist wahrscheinlich keine mobile-freundliche/reaktionsfähige Lösung.

HTML:

<header> 
    <!-- Navigation --> 
    <nav class="navbar navbar-default"> 
     <div class="container"> 
      <!-- Brand --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#"></a> 
      </div> 
      <div class="collapse navbar-collapse" id="navbar-collapse"> 
       <!-- Nav links --> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="index.html">Home</a></li> 
        <li><a href="about.html">About</a></li> 
        <li><a href="teams.html">Teams</a></li> 
        <li><a href="involved.html">Get Involved</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</header> 
<div class="jumbotron vertical-center"> 
    <div class="container text-center" id="landing"> 
     <h1>Website</h1><br> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu placerat eros, sed interdum lectus.</p> 
     <button type="button" class="btn btn-default">Learn More</button> 
    </div> 
</div> 

CSS:

.navbar { 
    margin-bottom: 0; 
} 

.jumbotron { 
    background: none; 
} 

.navbar-default { 
    background-color: transparent !important; 
    border-color: transparent; 
    background-image: none; 
    box-shadow: none; 
} 

Answer 1

Sie könnten die navbar fixiert machen, entfernen Sie die .jumbotron Marge und machen es min-height:100vh

https://jsfiddle.net/rf4Lj4y9/

.navbar-default { 
    background-color: transparent !important; 
    border-color: transparent; 
    background-image: none; 
    box-shadow: none; 
} 

.navbar { 
    margin-bottom: 0; 
} 

.jumbotron { 
    background: none; 
    min-height: 100vh; 
    margin-bottom: 0; 
} 

PS - Ihre Geige hat das CSS im JavaScript-Editor.