Calculate HTML element height with jQuery

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Working on current project, I needed to make sidebar’s height exact as article’s. Since all article are different height, I used javascript framework jQuery. In end found 2 options how to find height value of HTML element.

Problem dynamic height

You have post with dynamic (undefined) height (normally) and You want Your sidebar exact height as post.

Solution A: jQuery offset()

var fromelement = $(".status-publish");
var foffset = fromelement.offset();
var toelement = $("#comments");
var toffset = toelement.offset();
var myelemetheight = toffset.top-foffset.top;

Where:

  • fromp = element of start element of which You want to calculate height
  • toelement = other element on page, to which You want to calculate height
  • myelemetheight = calculated height (need to round up to full number)

Solution B: jQuery innerHeight() (easy)

var smcelement = $(".status-publish");
var myelemetheight = smcelement.innerHeight();

Apply CSS

Now You can add CSS attribute to Your sidebar element with jQuery .css()

$(".thisElementNeedNewHeight").css({'height': myelemetheight});

This is it!

References:

  • http://api.jquery.com/offset/
  • http://api.jquery.com/innerHeight/
  • http://api.jquery.com/css/
VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>