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

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

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

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

有什么建议？谢谢！

解决方法:

试试这个代码

jsfiddle

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

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

删除#并放点(.)