Question

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

注意： 的我只在用户输入时使用jndery中的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>

div底部的div不能与overflow-y一起使用

1 个答案: