jquery - 添加内容时如何让容器的高度增加而不是降低？

Question

我有一个容器，允许用户通过 input 向其中添加更多文本。容器是 position:absolute，上面有一个 top。当用户通过 input 添加到容器时，容器的高度会增加，但会向下。有没有办法让容器的底部保持原位，并使高度向上增长。

在这个 fiddle 示例中，我将提供我已经尝试做一个 bottom 而不是 top，这似乎是我想要的。但是，在我的应用程序中，我有将应用程序安装到页面的计算，bottom 是我不能总是指望的东西，但是 top 是我可以指望的东西并且应用会根据屏幕宽度和边缘检测计算正确安装。

那么有没有办法让它随着top一起长大呢？

$('form').submit(function(e){
	e.preventDefault();
	var inputVal = $('.input').val();
  var html = '<div class="content">'+inputVal+'</div>'
  $('.container').append(html)
});

.container{
  border:1px solid #000;
  width:300px;
  position:absolute;
  top:300px;
}
.content{
  padding:10px 5px;
}

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<form>
  <input type="text" class="input" placeholder="type, hit enter">  
</form>

<div class="container">
  <div class="content">Some Content</div>
</div>

Answer 1

你需要通过减去它的变化高度来计算容器的顶部位置(https://jsfiddle.net/hqb4kmtm/13/):

$('form').submit(function(e){
    e.preventDefault();
    var inputVal = $('.input').val();
    var html = '<div class="content">'+inputVal+'</div>'
    var container = $('.container');
    var heightBefore = container.height();
    container.append(html);
    var heightAfter = container.height();
    container.css({top:container.offset().top + heightBefore - heightAfter});
});