jQuery .height()

jQuery .height() gets or sets height of the target element;

jQuery .innerHeight() gets the computed height (including padding but not border) of the target element;

jQuery .outerHeight() gets the computed height (including padding and border) of the target element;

Also check jQuery .width()

js:

$(function(){

    var target_height = $('.target').height(); // get target height

    $('.target2').height( target_height ); // set target height

    $('.target2 .height2 span').text( target_height );

    $('.height_log span').text( $('.target').height() );

    $('.innerHeight_log span').text( $('.target').innerHeight() );

    $('.outerHeight_log span').text( $('.target').outerHeight() );

    

    $('.windowHeight_log span').text( $(window).height() ); // returns height of browser viewport

    $('.documentHeight_log span').text( $(document).height() ); // returns height of HTML document

});​

html:

<div class="well target">

    <span class="label label-warning">.target</span>

    <p>set in css:

        <span class="label label-info">height: 100px;</span>

        <span class="label label-info">padding: 10px;</span>

        <span class="label label-info">margin: 12px;</span>

        <span class="label label-info">border: 2px;</span>

    </p>

</div>



<div class="well">

    <p>get .target properties with jQuery:

    

        <span class="label label-success height_log">

            .target height: <span></span>

        </span>&nbsp;

        

        <span class="label label-success innerHeight_log">

            .target innerHeight: <span></span>

        </span>&nbsp;

        

        <span class="label label-success outerHeight_log">

            .target outerHeight: <span></span>

        </span>&nbsp;

    </p>

    

    <p>

        <span class="label label-success windowHeight_log">

            window height: <span></span>

        </span>&nbsp;

        

        <span class="label label-success documentHeight_log">

            document height: <span></span>

        </span>&nbsp;

    </p>

    

</div>



<div class="target2">

    <span class="label label-success height2">height:<span></span></span>

    <span>height of this block set by jQuery (same as .target block)</span>

</div>

css:

.target {

    height: 100px;

    padding: 10px;

    margin: 12px;

    border: 2px solid #bbb;

}



.target2 {

    background: #ccc;

    margin: 10px 0;

}