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/
