How do I apply the browser height to a CSS class?

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

jQuery:

$('.targetClass').css('height',otherObject.height()+'px');

Answer 2

You cannot rewrite/add new values to CSS properties/classes on the fly; you can write/rewrite/add values to elements.

You should post your situation, maybe there is a different way to do what you're trying to do.

Answer 3

$('#target').css('height',$(document.body).height()+'px')

(jQuery)

Answer 4

Find the rule object in a browser-specific way ( http://www.javascriptkit.com/domref/cssrule.shtml )

Then you can edit the style object of the rule object and actually change the CSS class definition

Answer 5

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.