jquery - div 底部的 Div 不适用于 overflow-y

Question

基于此fiddle我将 div 放在父 div 的底部。当父div中的数据溢出时，如何使底部div位于底部。

注意: 我只在用户输入时使用 jquery 中的 append 将底部 div 附加到附加 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>

Answer 1

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

查看 DEMO

// 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>