How to get the height of a div container through jQuery?

Question

I am developing a webpage for authors section for a book publishing website and working on the show more/ show less button. There are two media div's, one for the author image(on the left side) and his summary(on the right side). I want to enable/disable the show more/ show less button based on the height of the summary content. I want to enable the show more/less button only when the height of the summary content is more than that of the fixed height image (180px).

Referred from : http://jsfiddle.net/thebabydino/U7Cyk/

NOTE : media, media-left and media-body are bootstrap classes.

HTML Code :

 <div id = "author-page">
 <div>
 <h3> 
 Chetan Bhagat
 </h3>
 </div>
 <div class="media">
 <div class="media-left">
 <img class="media-object" src="http://img01.ibnlive.in/ibnlive/uploads/2014/10/chetan_bhagat_151110.jpg"/>
 </div>
 <div class = "media-body">
 <div class="info-wrapper">
 <a href="#" class="more">(more)</a>
 <a href="#" class="less">(less)</a>
 <div class="info">
 Chetan Bhagat is the author of six blockbuster books. These include five novels—Five Point Someone (2004), One Night @ the Call Center (2005), The 3 Mistakes of My Life (2008), 2 States (2009), 
 Revolution 2020 (2011), the non-fiction title What Young India Wants (2012) and Half Girlfriend (2014). Chetan’s books have remained bestsellers since their release. 
 Four out his five novels have been already adapted into successful Bollywood films and the others are in process of being adapted as well. The New York Times called him the ‘the biggest selling English language novelist in India’s history’. Time magazine named him amongst the ‘100 most influential people in the world’ and Fast Company, USA, listed him as one of the world’s ‘100 most creative people in business’. Chetan writes columns for leading English and Hindi newspapers, focusing on youth and national development issues. He is also a motivational speaker and screenplay writer. Chetan quit his international investment banking career in 2009 to devote his entire time to writing and make change happen in the country. He lives in Mumbai with his wife, Anusha, an ex-classmate from IIM-A, and his twin boys, Shyam and Ishaan. You can email him at [email protected] or fill in the Guestbook with your feedback. You can also follow him on twitter (@chetan_bhagat) or like his Facebook fanpage (https://www.facebook.com/chetanbhagat.fanpage).
 </div>
 </div>
 </div>
 </div>
 </div>

CSS :

    .info-wrapper {
        height: auto;
        position: relative;
        width: auto;
        padding: 0 0 2.5em 0; 
    } 
    .info {
        max-height: 180px;
        height: auto;
        width: auto;
        overflow: scroll;
        position: relative;  
    }
    .info:after, .aftershadow {
        bottom: 0;
        width: auto;
        height: auto;
    }

    .info-wrapper a {
        left: 50%;
        bottom: 1.5em;
        height: 1.25em;
        margin: -.1em 0 .35em -4.5em;
        position: absolute;
        font: 700 .67em/1.25em Arial;
        text-align: center;
        text-decoration: underline;
        cursor: pointer;
    }
    .info-wrapper a:focus { outline: none; }
    .info-wrapper .less { display: none; }


    .info-wrapper .more:focus ~ .info, 
    .info-wrapper .more:active ~ .info {
        max-height: none;
    }


    .info-wrapper .more:focus {

        display: none;
    }
    .info-wrapper .more:focus + .less {
        display: block;
    }

Answer 1

If i understood your question properly,you can use jquery height functionality

     $('window').height(); //gives height of browser viewport

Note that .height() will always return the content height, regardless of the value of the CSS box-sizing property

http://api.jquery.com/height

Answer 2

Put overflow hidden and programmatically identify

if the scrollHeight is higher than the the height of the div then make the "more" visible

var outerHeight = $(".info").outerHeight();

if($(".info")[0].scrollHeight > $(".info").height()) {
    $("a.more").show();
}

$("a.more").click(function(e){
    e.preventDefault();
    $(".info").css({"overflow": "visible"});
    $(".info").css({"max-height": "inherit"});
    $("a.less").show();
    $("a.more").hide();
    return false;
});

$("a.less").click(function(e){
    e.preventDefault();
    $(".info").css({"overflow": "hidden"});
    $(".info").css({"max-height": outerHeight + "px"});
    $("a.more").show();
    $("a.less").hide();
    return false;
});

here outerHeight will reach your max-height when the content overflows

Therfore you can put @media queries for various screen size and use max-height accordingly

Check this http://jsfiddle.net/ZigmaEmpire/9dgs6432/11