nav 및 jumbotron 결합

Question

내비게이션 및 점보 트론 div을 결합하여 두 가지 모두 전체 페이지 (100vh)를 포함하고 더 이상 진행하지 못하도록하고 있습니다. 본질적으로, 나는 네비게이션과 jumbotron을 원하지만, 스크롤 할 필요없이 엘리먼트가 전체 페이지를 채우길 원한다.

현재 내비게이션 높이가 고정되어 있으며 점보트론도 있습니다. JSFiddle에는 모든 것이 페이지를 넘는 것을 볼 수있는 충분한 화면이 없지만 여기 (https://jsfiddle.net/orna9gz8/)에서 살펴보십시오. 어떤 것들은 내가 시도했지만 작동하지 않았다 :

• 내가 탐색 및 대형 기기 사이에 기본 부트 스트랩 마진을 제거하려고했으나 대형 기기는 여전히 페이지를 넘어 간다.

• margin-top에서 -10%으로 설정을 시도했는데 문제가 일시적으로 해결되었지만 (이제는 모든 것이 한 페이지에 맞습니다.)하지만 더 작은 장치에서는 작동하지 않습니다. 이것은 아마도 모바일 친화적 인/신속한 해결책이 아닙니다.

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

당신은 고정 네비게이션 바에을하기 위해선, .jumbotron 마진을 제거하고 만들 수 그것을 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 - 귀하의 바이올린은 JavaScript 편집기에서 CSS를 사용합니다.