How to apply browser height to CSS class?

Question

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

But how to apply the value to the CSS class?

Answer 1

You don’t need to complicate this too much - you don’t need to look for a way to apply height to the CSS class. Just give each class <div>a in HTML:

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

then use jQuery code like this:

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

apply measured height to all elements of this class.

For a more reliable solution, attach the function to the event window onresizeto recalculate and apply the height when changing the height of the viewport.

Answer 2

JQuery

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

Answer 3

/ / CSS ; // .

, , , .

Answer 4

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

(Jquery)

Answer 5

Find the rule object by browser ( http://www.javascriptkit.com/domref/cssrule.shtml )

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