0

基于这个 小提琴，我将 div 放在父 div 的底部。当父 div 内的数据溢出时，如何使底部 div 位于底部。

注意： 我只在用户键入时使用 jquery 中的 append 将底部 div 附加到 append div 上，然后使用 remove 删除

<style>
    .container{
        position:relative;
        height:300px;
        overflow-y:auto;
        overflow-x: hidden;
        border:1px solid #000;
        width:400px;
    }
    .bottom{
        position:absolute;
        bottom:0px;
        border:1px solid #C9C9C9; 
        width:100%;
        background-color:yellow;
    }
</style>
<div class="container">

    <div class="bottom">picachu is typing</div>
</div> 

<div class="container">
    data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>
    data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>
    data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>
    data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>
    data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>
    <div class="bottom">picachu is typing</div>
</div>
4

1 回答 1

1

您必须添加div.content以包装您的内容并将其设置为min-height等于.container高度减去.bottom高度。然后将.bottom位置更改为相对。

查看演示

// css 

.bottom{
    position:relative; /* change to relative */
}
.content {
    min-height:278px;
}

// html

div1
<div class="container">
    <div class="content"></div> <!-- div.content -->
    <div class="bottom">picachu is typing</div>
</div> 
div 2<br/>
<div class="container">
    <div class="content"> <!-- div.content -->
    data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>
    data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>
    data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>
    data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>
    data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>
    <div>
    <div class="bottom">picachu is typing</div>
</div>
于 2013-10-03T03:30:03.590 回答