height計算サンプル2

by dxokoya

HTML

<div class="wrap">
<p>window.innerHeight = <span id="inner"></span></p>
<p>document.documentElement.clientHeight = <span id="client"></span></p>
<p>100vh = <span id="vh"></span></p>
</div>

SCSS

body {
  margin: 0;
}
.wrap {
  margin: 0;
  height: 100vh;
}
p {
  margin: 0;
  font-size: 1.5em;
  line-height: 1.5;
}

JavaScript

$(window).on('load resize', function () {
    var inner = window.innerHeight;
    var client = document.documentElement.clientHeight;
    var vh = $('.wrap').height();
    $('#inner').html(inner);
    $('#client').html(client);
    $('#vh').html(vh);
});