javascript - 根据动态内容动态调整div的大小？

Question

我有一个名为 container 的 div，它包含通过 javascript 动态创建的内容(段落)。问题在于，一旦超出容器的边界，paragphs 就不会显示在 div 上。为了解决这个问题，我尝试了溢出，但只是添加了 x,y 滚动条。

我想做的是在添加每个段落后增加容器的高度，即当段落添加到高度为 20px 的容器时，容器将下一段的高度增加到 40px。

HTML

<div class="container"></div>

<a href="#" id="add">Add content</a>

CSS

.container {
width: 120px;
height: 20px;
display: inline-block;
margin-left: auto;
margin-right: auto;
/* overflow: auto; */  //As aforementioned, I'm not in favour of scrollbars
background-image: url('http://i.imgur.com/dfzk0TW.png');
}

Javascript

$(function () {
  $('#add').on('click', function () {
    $('<p>Text</p>').appendTo('#container');
  });
});

有什么建议吗？谢谢!

Answer 1

试试这段代码

jsfiddle

从 css 中删除高度并使用下面的代码

$('<p>Text</p>').appendTo('.container');

删除#并放置点(.)