Get height of div with no height set in css

Question

Is there any way to get the height of an element if there is no CSS height rule set for the element I cannot use  height   jQuery method because it need a CSS rule set first  Is there any other way to get the height

User · Answer

Also make sure the div is currently appended to the DOM and visible

User · Answer

jQuery  height will return you the height of the element  It doesn t need CSS definition as it determines the computed height   DEMO  You can use  height     innerHeight   or outerHeight   based on what you need      height   - returns the height of element excludes padding  border and margin    innerHeight   - returns the height of element includes padding but excludes border and margin    outerHeight   - returns the height of the div including border but excludes margin    outerHeight true  - returns the height of the div including margin   Check below code snippet for live demo       x000D   x000D    function     x000D    var  heightTest       heightTest    x000D     heightTest html  Div style set as  height  180px  padding  10px  margin  10px  border  2px solid blue     x000D       append   lt p gt Height   height   returns         heightTest height        Just Height  lt  p gt    x000D       append   lt p gt Inner Height   innerHeight   returns        heightTest innerHeight        Height   Padding  without border   lt  p gt    x000D       append   lt p gt Outer Height   outerHeight   returns        heightTest outerHeight        Height   Padding   Border  lt  p gt    x000D       append   lt p gt Outer Height   outerHeight true  returns        heightTest outerHeight true       Height   Padding   Border   Margin  lt  p gt    x000D      x000D  div   font-size  0 9em    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt div id  heightTest  style  height  150px  padding  10px  margin  10px  border  2px solid blue  overflow  hidden    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Just a note in case others have the same problem   I had the same problem and found a different answer  I found that getting the height of a div that s height is determined by its contents needs to be initiated on window load  or window scroll not document ready otherwise i get odd heights smaller heights  i e before the images have loaded  I also used outerHeight     var currentHeight   0    window  load function           get the natural page height -set it in variable above       currentHeight       js content container   outerHeight         console log  set current height on load       currentHeight      console log  content height function  should be 374         contentHeight

User · Answer

Can do this in jQuery  Try all options  height     innerHeight   or  outerHeight        document   ready function             right div   css   height       left div   innerHeight            Example Screenshot    Hope this helps  Thanks

[jquery] Get height of div with no height set in css

Examples related to jquery

Examples related to css

Examples related to height