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 将扩展到 1000px。但我的问题是，通过设置overflow:hidden，按钮不可见。我希望按钮显示在 div 的末尾。在点击之前和点击之后，我想在 div 的末尾显示按钮。这个怎么做？

Answer 1

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

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

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