股利底部的div不工作溢出-y

Question

基於此fiddle我把div放在父div的底部。當父div中的數據溢出時，如何讓bottom div處於底部。

注： 我只追加使用追加jQuery中，當用戶鍵入然後取出使用remove追加DIV底部的div

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