jquery - 如何将按钮放在溢出隐藏 div 的末尾？

Question

HTML:

<div id="content">
content ,content,content ,content...
<input type="button" value="see more">
</div>

css

#content
{
        width:500px;
    height:400px;/* actual height 1000px */
    float:left;
    color:grey;
    text-align:justify;
    text-indent:1em;
    border:1px solid black;
    padding:10px;
        overflow:hidden;
}

使用 jquery 单击按钮，div 将扩展到 1000 像素。但我的问题是，通过设置 overflow:hidden，按钮不可见。我希望按钮显示在 div 的末尾。单击之前和单击之后，我想在 div 的末尾显示按钮。如何做到这一点？

Answer 1

#content{
    position: relative; 
}
input[type='button']{
    position: absolute;
    bottom: 0;
}

绝对定位的元素相对于最近的“非静态”定位的父元素定位。这就是为什么我们需要先将 #content 设置为 relative。

演示: http://jsfiddle.net/RFFwy/