如何获取标题的可用视口的完整高度？

Question

假设打开了一个Google Chrome窗口，我希望将标题的完整高度视为标题：

正如您可以看到博主网站，我想为标题采用可见大小的chrome。我怎样才能做到这一点？

就像你在图片中看到的一样。如果可能的话，我不想使用vh单元，因为当我在谷歌浏览器中打开控制台时，它会向上移动标题。

Answer 1

html, body {
    height: 100%;
}

.header {
    min-height: 100%;
}

Answer 2

您可以使用此代码使用jQuery。 当您使用Chrome控制台调整页面大小时，$（window）.resize（）非常有用。

＆＃13;

＆＃13;

$(document).ready(function () {
  $('header').height($(window).height());
  
  $(window).resize(function(){
    $('header').height($(window).height());
  });
});

＆＃13;

header {
background: red;
color:#fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Your header!</header>

＆＃13;

＆＃13;

＆＃13;