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。

DEMO： http://jsfiddle.net/RFFwy/

如何在溢出隐藏div的末尾放置按钮？

1 个答案: