Question

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

在这个小提琴示例中，我将提供我尝试过bottom而不是top，这似乎与我想要的一样。但是，在我的应用程序中，我有计算将应用程序安装到页面上，bottom是我无法依赖的东西，但top是我可以依靠的东西，应用程序正确安装依赖于屏幕宽度和边缘检测计算。

那么有没有办法让它成长为top？

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

这样做：

.container{
   border:1px solid #000;
   width:300px;
   position:absolute;
   height: auto;
   bottom:30px;
}

查看JSFIDDLE

上的工作示例

这种方法的缺点（以及你想要做的一般事情）是当新文本占据container div之上的整个空间时，它会搞乱你现有的元素。要解决此问题，您必须跟踪container div上的高度更改并更新bottom属性。

Answer 3

像这样的东西

HTML：

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

JS：

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

您正在寻找 - 希望有所帮助。基本上你所做的只是将输入附加到错误的div。此解决方案还保持与您请求的完全相同的CSS样式...

如何让容器高度增长，而不是在添加内容时关闭？

3 个答案: