Question

当div上没有足够的空间时，我需要添加一个滚动条。另外，我想从这个div的底部插入行。我试过overflow:auto，但它似乎无法正常工作。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

在#content中添加高度：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()); }); });

Answer 2

#content中的

你应该有以下几点：

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

如果您希望滚动条始终关闭，只需在js中执行：

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

这是一个有效的FIDDLE

Answer 3

应用overlflow-y: scroll应该有效，但是在两个div上都使滚动条变为惰性（之前从未见过）。我删除了外部div并更改了#content div position: absolute它现在运行得很好。随着内容的增长，滚动条变长。如果您希望在内容增长时扩展框，请使用position: relative ~~我还将动态内容从文本行更改为div。~~

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

#content {
  display: table-cell;
  position: absolute;
  /*Use relative if you want the box to expand with the content.*/
  /*position: relative;*/
  
  top: 1%;
  bottom: 1%;
  left: 2%;
  
  width: 40vw;
  max-width: 260px;
  height: 70vh;
  /*Use this if you want the box to strech to the edge */ 
  /*min-height:100%;*/

  font-size: 12px;
  border: 1px solid black;
  background-color: white;
  border-radius: 5px;
  
  text-align: center;
  vertical-align: bottom;
  bottom:0;
  overflow-y: scroll;
 }

#add {
  position:absolute;
  top:50%;
}

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

滚动div＆amp;从底部插入

3 个答案: