CODEWITHSUNDEEP
htmlcss
Sanjay
Sanjay

Reputation: 550

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.

Upvotes: 0

Views: 312

Answers (2)

Masood
Masood

Reputation: 1594

html, body {
    height: 100%;
}

.header {
    min-height: 100%;
}

Upvotes: 1

AndrePliz
AndrePliz

Reputation: 259

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>

Upvotes: 0

Related Questions