JSFiddle - React, Tailwind, and code Playground

by lark

HTML

<div class="height-100"></div>
<div class="height-50"></div>

<div id="height100">
    <h3>100% measurement</h3>
    Expected: <span class="expected"></span>
    Actual: <span class="actual"></span>
    Version: <span class="version"></span>
</div>

<div id="height50">
    <h3>50% measurement</h3>
    Expected: <span class="expected"></span>
    Actual: <span class="actual"></span>
    Version: <span class="version"></span>
</div>

CSS

.height-100 {
    height: 100%;
    position: absolute;
}

.height-50 {
    height: 50%;
    position: absolute;
}

JavaScript

// Test height 100%, both should be equal
$("#height100").find(".expected").html( $(window).height() ).end()
    .find(".actual").text( $(".height-100").height() ).end()
    .find(".version").text( $.fn.jquery );

// Test height 50%, both should be equal -- in testing its always off by .5px when the window height is odd
$("#height50").find(".expected").text( $(window).height()/2 ).end()
    .find(".actual").text( $(".height-50").height() ).end()
    .find(".version").text( $.fn.jquery );