javascript - 滚动 div 并从底部插入

Question

当 div 上没有足够的空间时，我需要添加一个滚动条。 另外，我想从这个 div 的底部插入行。 我尝试了 overflow:auto 但它似乎不起作用。

var a=0;
$(function(){
    $('#add').click(function(){
               a++;
        $('#content').append('line'+a+'<br>');
             
	});
});

#mydiv {
  position: absolute;
  top: 1%;
  bottom: 1%;
  left: 2%;
   width: 40vw;
  height: 49vh;
  max-width: 260px;
  font-size: 12px;
  border: 1px solid black;
   background-color: white;
  border-radius: 5px;
  overflow: auto;
  display: table-cell;
  text-align: center;
  vertical-align: bottom;
}
#content {
  width:100%;
  position:absolute;
  bottom:0;
   overflow: auto;
 }
#add{
  position:relative;
  top:270px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mydiv">
  <div id="content">
 
  </div>
  
</div>
<button id="add">add</button>

Answer 1

在#content 中添加height:100%。 <强> DEMO

#content{
  width:100%;
  height:100%;
  position:absolute;
  bottom:0;
  overflow: auto;
}

您还可以为每个新元素提供向下滚动。测试这个 Fiddle

var a=0;
var content=$('#content');
$(function(){
    $('#add').click(function(){
            a++;
            content.append('line'+a+'<br>');
            content.scrollTop(content.height());
    });
});