Как сделать заголовок для всех экранов: Bootstrap

Question

Я хочу, чтобы мой заголовок занял весь экран. Я пробовал

header { 
    height: 100% 
} 

но это ничего не меняло. Я могу заставить его работать, но только путем изменения количества пикселей, и когда я перехожу на другой компьютер, он не работает.

Спасибо всем, кто может мне помочь, если вам нужна дополнительная информация, пожалуйста, спросите меня, я буду рад предоставить его.

Здесь вы идете: HTML

<!-- Navigation --> 
<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header page-scroll"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <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 page-scroll" href="#page-top">Webfolio</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a class="page-scroll" href="#page-top">Home</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#accessibility">Accessiblity</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#usability">Usability</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#graphics">Graphics</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#javascript">JavaScript</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#tools">Tools</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#videos">Videos</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

<!-- Header --> 
<header> 
    <div class="container"> 
     <div class="intro-text"> 
      <div class="intro-lead-in">My name is Ian Geer</div> 
      <div class="email"><a href="mailto:iandavidgeer@gmail.com">iandavidgeer@gmail.com</a></div> 
      <div class="intro-heading">Web Design:<a href="ingrahamhs.seattleschools.org">Ingraham</a> 2016</div> 
      <a href="#units" class="page-scroll btn btn-xl">Main Content</a> 
     </div> 
    </div> 
</header> 

и: CSS

header { 
    padding: 62px 63px; 
    text-align: center; 
    color: #fff; 
    background-attachment: scroll; 
    background-image: url(../img/seattle.jpg); 
    background-position: center center; 
    background-repeat: none; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 

Answer 1

Простое решение:

header { 
    height: 100vh; 
} 

Это использует viewport units. В зависимости от браузеров, которые вы поддерживаете, это, вероятно, ваш лучший вариант. Browser support for viewport units

Если вам нужна поддержка IE8 или более старые мобильные браузеры, вы можете сделать это вместо того, чтобы:

html, body { 
    height: 100%; 
} 
header { 
    height: inherit; 
}