John John - 3 years ago 272
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 {
background: red;
<script src=""></script>
<header>Your header!</header>

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