javascript - 如何通过jQuery获取div容器的高度？

Question

我正在为图书出版网站的作者部分开发一个网页，并致力于显示更多/显示更少按钮。有两个媒体 div，一个用于作者图片(左侧)和他的摘要(右侧)。我想根据摘要内容的高度启用/禁用显示更多/显示更少按钮。我只想在摘要内容的高度大于固定高度图像 (​​180px) 的高度时启用显示更多/更少按钮。

引用自:http://jsfiddle.net/thebabydino/U7Cyk/

注意:media、media-left 和 media-body 是引导类。

HTML 代码:

 <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 info@chetanbhagat.com 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

如果我正确理解你的问题，你可以使用 jquery 高度功能

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

请注意，无论 CSS box-sizing 属性的值如何，.height() 将始终返回内容高度

http://api.jquery.com/height