Get the full height of an HTML element partially hidden by overflow: hidden with jQuery / Javascript

Question

As the name says, how can I get the entire height of an element that is partially hidden using the div container using: hidden. Almost as if it were not hidden and scrolled.

Any ideas?

Answer 1

HTML

<div id="wrapper"> <div id="content">Short ribs frankfurter jerky, corned beef tongue chuck meatball. Hamburger drumstick chuck pork chop brisket, prosciutto leberkäse bresaola shank. Corned beef chuck prosciutto beef cow. Tail bresaola biltong, turkey beef beef ribs cow salami. Ground round sausage filet mignon andouille beef ribs, venison pork loin swine frankfurter turkey. Ball tip drumstick swine, ribeye t-bone chuck meatball brisket salami. Meatball pork chop corned beef filet mignon pastrami pork loin ham t-bone andouille kielbasa. Drumstick spare ribs shank, pastrami bacon biltong swine meatball capicola. Chicken salami short ribs meatloaf cow kielbasa. Chuck ham hock venison rump, flank frankfurter short ribs sirloin ribeye ham leberkäse capicola drumstick. Capicola ball tip beef tail pastrami, shank pork loin pancetta frankfurter swine ribeye andouille. Andouille chicken pork belly leberkäse pastrami, swine corned beef. Jerky rump frankfurter, short loin hamburger beef kielbasa biltong ground round fatback. Pork chop tri-tip ham hock ham. </div> </div> 

CSS

 #content { height: auto; } #wrapper { height: 30px; overflow: hidden; } 

JQuery / js

 $('#content').height() 

DEMO

http://jsfiddle.net/sparky672/gQanb/4/

Answer 2

You can use the clientHeight property. http://jsfiddle.net/gQanb/