How to Get the Height of a Div When No Explicit CSS Height is Set?

Determine Div Height without Explicit CSS Rule

Getting the height of a div can be challenging if there's no explicitly set height in the CSS. While the .height() jQuery method is typically used for this, it requires an existing CSS rule for proper functionality. Here's an alternative approach:

jQuery Height Functions

jQuery offers a range of height functions that can provide accurate height measurements, even without CSS height rules:

• .height(): Excludes padding, border, and margin.
• .innerHeight(): Includes padding but excludes border and margin.
• .outerHeight(): Includes border but excludes margin.
• .outerHeight(true): Includes margin.

Usage Demo

The below code snippet demonstrates how to use these functions:

<code class="js">$(function() {
  var $heightTest = $('#heightTest');
  $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('<p>Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]</p>')
    .append('<p>Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]</p>')
    .append('<p>Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]</p>')
    .append('<p>Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]</p>')
});</code>

Output:

The div's computed height is displayed in the div itself, providing detailed information about each function's output.

The above is the detailed content of How to Get the Height of a Div When No Explicit CSS Height is Set?. For more information, please follow other related articles on the PHP Chinese website!