Question

You can read your browser dimensions with jQuerys $document.height or with simple JS via height: window.innerHeight || document.body.clientHeight.

But how do I apply the value to a CSS class?

Answer 1

No need to overcomplicate this – you don’t need to find a way to apply the height to a CSS class. Just give each of your <div>s a class in the HTML:

<div class="viewport_height">This is some content.</div>

then use jQuery code similar to this:

var document_height = $(document).height();
$('.viewport_height').css('height', document_height + 'px');

to apply the measured height to all elements of that class.

For a more robust solution, attach a function to the window‘s onresize event to recalculate and apply the height whenever the viewport height changes.