How to make header take up all screen: Bootstrap - html

Question

I would like to get my header to take up the whole screen. I have tried
header {
height: 100%
}
but that didn't change anything. I can get it to work but only by changing the amount of pixels and when I go onto a different computer it doesn't work.
Thank you anyone that can help me, if you need any more information please ask, I will be happy to provide it.
Here you go: 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">iandavidgeer#gmail.com</div>
<div class="intro-heading">Web Design:Ingraham 2016</div>
Main Content
</div>
</div>
</header>
and: 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

Easy solution:
header {
height: 100vh;
}
This uses viewport units. Depending on the browsers that you are supporting, this is probably your best option. Browser support for viewport units
If you need to support IE8 or older mobile browsers, you can do this instead:
html, body {
height: 100%;
}
header {
height: inherit;
}