Encountered the same issue when trying to retrieve the width of a hidden element, so I created a plugin called jQuery Actual to address it. Instead of using

$('#some-element').height();

you can now use

$('#some-element').actual('height');

This will provide you with the correct value for a hidden element or an element with a hidden parent.

For complete documentation, please visit here. There is also a demo included on the page.

I hope this proves helpful :)

You may be mixing up two different CSS properties: the display property and the visibility property.

If an element is hidden using the visibility property, it still occupies space on the page, so you can retrieve its height even if it's not visible.

However, if the element is hidden by setting the display property to "none", it won't take up any space on the page. In this case, you'll need to change the display property to a value that will make the element visible in order to retrieve its height.

When faced with this issue, I once turned to a clever workaround. I created a custom jQuery scrollbar widget that encountered a problem - determining if the scrollable content was hidden within markup. Here is how I tackled it:

// Attempt to retrieve the element's height
if (this.element.height() > 0) {
    var scroller_height = this.element.height();
    var scroller_width = this.element.width();

// If the height is zero, then we are dealing with a hidden element
} else {
    var copied_elem = this.element.clone()
                      .attr("id", false)
                      .css({visibility:"hidden", display:"block", 
                               position:"absolute"});
    $("body").append(copied_elem);
    var scroller_height = copied_elem.height();
    var scroller_width = copied_elem.width();
    copied_elem.remove();
}

While this method generally works, there is a potential issue to be aware of. If the cloned content has CSS styles referencing parent elements, the styling may not carry over accurately and measurements could differ. To avoid this, ensure that the markup being cloned has independent CSS rules.

Another consideration is ensuring the cloned element's width matches that of the parent element. In cases where no width is explicitly set, a recursive search through the DOM ancestry may be necessary to find the correct parent element's width.

Expanding on the responses from user Nick and user hitautodestruct's plugin on JSBin, I have developed a new jQuery plugin that extracts both width and height values and returns them as an object.

Latest Update

I have completely revamped this small plugin after discovering that the previous version (mentioned earlier) was not practical in real-world scenarios with extensive DOM manipulation.

This updated plugin is functioning flawlessly:

/**
 * getSize plugin
 * This plugin enables the retrieval of the width and height from hidden elements within the DOM.
 * It can be applied to a jQuery element and will provide an object containing the element's width
 * and height information.
 *
 * Featured on StackOverflow:
 * http://stackoverflow.com/a/8839261/1146033
 *
 * @author Robin van Baalen <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2a0bdb0bbbc92bcb7a4b7a0a5bdbdb6a1fcb1bdbf">[email protected]</a>>
 * @version 1.1
 * 
 * CHANGELOG
 *  1.0 - Initial release
 *  1.1 - Overhauled internal logic to ensure compatibility in javascript-heavy environments
 *
 * @return {object} The returned object is a native JavaScript object
 *                  (not jQuery, thus not chainable!!) which
 *                  includes the width and height of the specified element.
 */
$.fn.getSize = function() {    
    var $wrap = $("<div />").appendTo($("body"));
    $wrap.css({
        "position":   "absolute !important",
        "visibility": "hidden !important",
        "display":    "block !important"
    });

    $clone = $(this).clone().appendTo($wrap);

    sizes = {
        "width": $clone.width(),
        "height": $clone.height()
    };

    $wrap.remove();

    return sizes;
};

Expanding on the solution provided by Nick:

$("#myDiv").css({'position':'absolute','visibility':'hidden', 'display':'block'});
optionHeight = $("#myDiv").height();
$("#myDiv").css({'position':'static','visibility':'visible', 'display':'none'});

In my experience, a better approach is:

$("#myDiv").css({'position':'absolute','visibility':'hidden', 'display':'block'});
optionHeight = $("#myDiv").height();
$("#myDiv").removeAttr('style');

Applying CSS attributes can override existing styles from your CSS file when inserted inline. By removing the style attribute altogether in the HTML element, it resets everything back to its original state while keeping it hidden as intended.

One alternative method is to move the invisible div off-screen using a negative margin instead of hiding it with display:none, similar to how the text indent image replacement technique works.

For example:

position:absolute;
left:  -3000px;
top: 0;

This approach ensures that the height() property remains accessible.

Trying to uncover a reliable function for hidden elements led me to the realization that CSS is more intricate than commonly assumed. With the introduction of various layout techniques in CSS3 such as flexible box, grid, column, and element positioning within complex parent elements, finding a universal solution becomes challenging.

Flexibox Example

The most viable and straightforward solution seems to be real-time rendering, where the browser can accurately determine the dimensions of an element in real-time.

Regrettably, JavaScript lacks a direct event to signal when an element is shown or hidden. To address this challenge, I have developed a function utilizing the DOM Attribute Modified API to trigger a callback function whenever the visibility of an element changes.

$('[selector]').onVisibleChanged(function(e, isVisible)
{
    var realWidth = $('[selector]').width();
    var realHeight = $('[selector]').height();

    // render or adjust something
});

For further details, please refer to my project on GitHub.

https://github.com/Soul-Master/visible.event.js

Demo: http://jsbin.com/ETiGIre/7

In my experience, I have come across a solution similar to Nick Craver's approach for accurately obtaining dimensions by setting an element's visibility. While this method has been quite handy for me on numerous occasions, the manual resetting of styles can be a bit cumbersome. Often, during development, I make changes to the initial positioning or display of an element in CSS without updating the corresponding JavaScript code. To address this issue, I have devised a simple script that removes the inline styles applied by JavaScript:

$("#myDiv")
.css({
    position:   'absolute',
    visibility: 'hidden',
    display:    'block'
});

optionHeight = $("#myDiv").height();
optionWidth = $("#myDiv").width();

$("#myDiv").attr('style', '');

It is important to note that this script assumes there are no other inline styles present, as they will also be removed. However, the advantage of this approach is that it restores the element's styles back to their original state defined in the CSS stylesheet. This script can be encapsulated into a function where an element is passed in, and either its height or width is returned.

Another challenge I have encountered with setting styles inline using JavaScript is when working with CSS3 transitions. In such cases, ensuring that your style rules outweigh any inline styles can be quite frustrating at times.

According to the definition, an element's height is only considered when it is visible.

I'm intrigued - what is the reason behind needing the height of a hidden element?

An alternative solution would be to hide an element in a more subtle way by positioning it behind an overlay (utilizing z-index).

My situation involved a hidden element that was preventing me from retrieving the height value. However, it turned out to be one of its parent elements causing the issue. I implemented a check within one of my plugins to determine if the element was hidden. If so, I looked for the closest hidden element. Here's a snippet of the code:

var $content = $('.content'),
    contentHeight = $content.height(),
    contentWidth = $content.width(),
    $closestHidden,
    styleAttrValue,
    limit = 20; //failsafe

if (!contentHeight) {
    $closestHidden = $content;
    
    if ($closestHidden.css('display') !== 'none') { 
        while ($closestHidden.css('display') !== 'none' && $closestHidden.size() && limit) {
            $closestHidden = $closestHidden.parent().closest(':hidden');
            limit--;
        }
    }
    styleAttrValue = $closestHidden.attr('style');
    $closestHidden.css({
        position:   'absolute',
        visibility: 'hidden',
        display:    'block'
    });
    contentHeight = $content.height();
    contentWidth = $content.width();

    if (styleAttrValue) {
        $closestHidden.attr('style',styleAttrValue);
    } else {
        $closestHidden.removeAttr('style');
    }
}

This solution combines Nick, Gregory, and Eyelidlessness's suggestions to incorporate Gregory's enhanced approach while utilizing both methods to handle any issues with the style attribute or parent elements.

One drawback of this solution is that the loop through the parents may not be entirely efficient.

Here's a clever trick: create a parent div outside the target element, set its height to '0', and hide any overflow. Then, retrieve the height of the child element and remove the overflow property from the parent.

var height = $("#child").height();
// Perform your operation here
$("#parent").append(height).removeClass("overflow-y-hidden");

.overflow-y-hidden {
  height: 0px;
  overflow-y: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="parent" class="overflow-y-hidden">
  <div id="child">
    This is some content whose height I need to determine!
  </div>
</div>

If you want to find the true height of a concealed element, you can try a different method which involves getting the height of the scroll view using this code:

$firstOption[0].scrollHeight

Check out this handy script I crafted to manage all of jQuery's dimension functions for concealed elements, even those within hidden parent elements. Keep in mind that utilizing this script may come with a performance cost.

// Accurately calculate dimensions of hidden elements
(function($) {
    var originals = {},
        keys = [
            'width',
            'height',
            'innerWidth',
            'innerHeight',
            'outerWidth',
            'outerHeight',
            'offset',
            'scrollTop',
            'scrollLeft'
        ],
        isVisible = function(el) {
            el = $(el);
            el.data('hidden', []);

            var visible = true,
                parents = el.parents(),
                hiddenData = el.data('hidden');

            if(!el.is(':visible')) {
                visible = false;
                hiddenData[hiddenData.length] = el;
            }

            parents.each(function(i, parent) {
                parent = $(parent);
                if(!parent.is(':visible')) {
                    visible = false;
                    hiddenData[hiddenData.length] = parent;
                }
            });
            return visible;
        };

    $.each(keys, function(i, dimension) {
        originals[dimension] = $.fn[dimension];

        $.fn[dimension] = function(size) {
            var el = $(this[0]);

            if(
                (
                    size !== undefined &&
                    !(
                        (dimension == 'outerHeight' || 
                            dimension == 'outerWidth') &&
                        (size === true || size === false)
                    )
                ) ||
                isVisible(el)
            ) {
                return originals[dimension].call(this, size);
            }

            var hiddenData = el.data('hidden'),
                topHidden = hiddenData[hiddenData.length - 1],
                topHiddenClone = topHidden.clone(true),
                topHiddenDescendants = topHidden.find('*').andSelf(),
                topHiddenCloneDescendants = topHiddenClone.find('*').andSelf(),
                elIndex = topHiddenDescendants.index(el[0]),
                clone = topHiddenCloneDescendants[elIndex],
                ret;

            $.each(hiddenData, function(i, hidden) {
                var index = topHiddenDescendants.index(hidden);
                $(topHiddenCloneDescendants[index]).show();
            });
            topHidden.before(topHiddenClone);

            if(dimension == 'outerHeight' || dimension == 'outerWidth') {
                ret = $(clone)[dimension](size ? true : false);
            } else {
                ret = $(clone)[dimension]();
            }

            topHiddenClone.remove();
            return ret;
        };
    });
})(jQuery);

To retrieve the height of an element that has already been displayed on the page, you can simply access it directly from the DOM using jQuery's .get(0) method, even if the element is currently hidden:

$('.hidden-element').get(0).height;

The same applies for obtaining the width:

$('.hidden-element').get(0).width;

(special thanks to Skeets O'Reilly for the correction)