vhをpxに変換する方法（JavaScript / jQuery）

JavaScript（jQuery）でvhを非常に簡単にpxに変換する方法です。
スマホでヘッダー固定にして、ハンバーガーメニューをタップ後に開くメニュー背景の高さをセットするのに利用しました。

【解決法】

$('.menu-wrapper').css('height', '100vh');   // set the wrapper height to the window height once
var vh = $('.menu-wrapper').height() + 'px'; // get the vh height in pixel

【備考】

単純に、一旦HTML要素をvhに設定し、その高さをjQueryのheight() で取得するという方法です。

ここでは、「.menu-wrapper」を一度100vhに設定してその高さをpixelで取得後、headerの高さを差し引いたものを再度「.menu-wrapper」にセットする形です。

$('.menu-wrapper').css('height', '100vh'); // set the wrapper height to the window height once
var vh = $('.menu-wrapper').height();      // get the vh height in pixel
var header_h = $('header').height();       // get the header height in pixel
$('.menu-wrapper').css('height', vh - header_h + 'px');

全く使わないdivタグに100vhを設定して、その高さを０にしたり、display:noneにしたり、remove()するのもありかと思います。

理屈を覚えれば感覚的にできる分、シンプルかなと思います。