John John - 1 year ago 201
CSS Question

How to take full height of available viewport for header?

Suppose, a Google Chrome window is opened and i want to take full height of visible viewport for header like:enter image description here

As you can see the blogger website, I want to take visible size of chrome for header. How can i do this?
enter image description here

Like you can see in the picture. And if possible i dont wanna use vh unit because it shifts header up when i open console in google chrome.

Answer Source

You can do it with jQuery using this code. The $(window).resize() is useful when you resize the page by using the Chrome console.

$(document).ready(function () {
  $('header').height($(window).height());
  
  $(window).resize(function(){
    $('header').height($(window).height());
  });
});
header {
background: red;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Your header!</header>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download