在调整浏览器大小时,如何根据div大小触发显示或隐藏操作

Question

我正在为图书出版网站的作者页面设计一个摘要容器.一些作者有更多的摘要内容,而其他作者的内容较少.我想在div容器的高度超过截止高度(180px)时动态启用/禁用显示更多/更少按钮.因此,事实证明动态控制div容器的高度(180px和原始高度).我需要一段在所有浏览器中都能完美运行的代码.

我在这里实现了一个代码:

http://jsfiddle.net/rraagghhu/9dgs6432/3/

HTML:

<div class = "container">
<div class="info-wrapper">
<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>
<a href="#" class="more">(more)</a>
<a href="#" class="less">(less)</a>
</div>

<div class = "footer"> THIS IS FOOTER </div>
</div>

CSS:

.container{
    background-color: yellow;
 }
.footer{
    background-color: yellow;
 }
 .info-wrapper {
    height: auto;
    position: relative;
    width: auto;
    padding: 0 0 2.5em 0; 
    background-color: red;
 } 
 .info {

    max-height: 180px;
    height: auto;
    width: auto;
    overflow: hidden;
    position: relative; 
    text-align: justify;
}
.info:after, .aftershadow {
    bottom: 0;
    width: auto;
    height: auto;
}

.info-wrapper a {
    left: 50%;
    position: relative;
    font: 700 .67em/1.25em Arial;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
}
.less { height: auto; display: none; }
.more { display: none; } 

jQuery的:

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

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

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

如您所见,页脚保持在绝对位置.如果单击更多按钮,(较少)应该下降,低于应该来到页脚.当浏览器缩小/扩展时,是否可以动态启用/禁用show more/less按钮？

Answer 1

设置max-height为100%表示显示更多，设置max-height为180px表示显示较少。

更新了 JSFiddle