Justified and vertically centered header elements not working with fixed header - html

Question

I found a really interesting article on how to VAlign elements inside a Header. The thing is I need a fixed header with a 100% height (so i can make the VAlign work properly). Since the Header is out of the document flow the 100% Height is making the header take whe whole viewport height. Is there any way to make this method work using a fixed header with a 100% height but avoiding the header to take the 100% height of the viewport ?
here's the code and a codepen link :
CodePen Example
#banner {
background: #3677ae;
border: 1px solid orange;
height: 100%;
left: 0;
overflow: hidden;
padding: 0 2%;
position: fixed;
text-align: justify;
right: 0;
top: 0;
z-index: 100;
}
#banner:after {
content: '';
display: inline-block;
width: 100%;
}
#banner #logo,
#banner nav.navAplicacio {
display: inline-block;
}
#banner #logo h1 {
line-height: normal;
height: 100%;
padding: 0;
}
#banner #logo h1:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
#banner #logo h1 img {
height: 13px;
padding: 0;
margin: 0;
vertical-align: inherit;
width: 77px;
}
#banner .navAplicacio {
line-height: normal;
}
#banner .navAplicacio ul {
margin: 0;
padding: 0;
}
#banner .navAplicacio ul li {
list-style: none;
line-height: normal;
display: inline-block;
padding: 0 0 0 11px;
}
#banner .navAplicacio ul li:first-child {
padding-left: 0;
}
#banner .navAplicacio ul li a {
color: #fff;
}
<header id="banner" role="banner">
<div id="logo">
<h1 class="site-title">
<img alt="${logo_description}" height="13px" src="${images_folder}/EACAT.png" width="77px" />
</h1>
</div>
<nav class="navAplicacio">
<ul>
<li>Bloc
</li>
<li>Suport
</li>
<li>Surt
</li>
<li>Torna
</li>
<li>
<button class="btn-usuari" type="button" id="dropUsuari">Jordi Parodi <i>(Martorelles, Aj. de)</i> <span class="ico"><img src="${images_folder}/EC80017.JPG" alt="Escut Aj. de Martorelles"></span><span class="caret"></span>
</button>
</li>
</ul>
</nav>
</header>