Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Brad Woods
Brad Woods
13,772 Points
Posted by Brad Woods
Brad Woods
13,772 Points

Getting the height of a height:auto element

I have an element that has it's height set to auto. I'm trying to get the pixel height of it once it has loaded into the webpage. Using the console I have tried .css method and document.getElementsByClassName('...').offsetHeight, both of these have returned undefined values.

I'm using AngularJS. The element I'm trying to calculate the height of is an ng-view element.

2 Answers

Jeff Busch
Jeff Busch
19,287 Points

Hi Brad,

Have you tried jQuery's .height(), .outerHeight(), or ,innerHeight() methods? They are getters and setters. Below is an example of getting the height of the center div (#main-article) and setting the left and right divs to the same height. Also, the height of the center div is not set, it's height depends on the amount of content in it. Hope this answers your question.

$(document).ready(function() {

  var main_article = $("#main-article").outerHeight();
  $("#sidebar-left").css({height:main_article});
  $("#sidebar-right").css({height:main_article});

});

Jeff

Brad Woods
Brad Woods
13,772 Points
Brad Woods
Brad Woods
13,772 Points

Thanks mate, I was trying to avoid using jQuery because of the library file size. Someone did tell me about this which is much more suitable for my needs - http://zeptojs.com/