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

Question

我有一个名为“container”的div，其中包含通过JavaScript动态创建的内容（段落）。问题是，一旦段落超出容器的边界，它们就不会显示在div上。为了解决这个问题，我尝试使用overflow，但这只会添加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');
  });
});

有什么建议吗？谢谢！

- StackOverQuestions

---

我看不到你在增加任何东西。 - Chrillewoodz

尝试从CSS代码中删除高度后再试。 - Nishit Maheta

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Sadikhasan

是的，但我也想要去掉滚动条。 - StackOverQuestions

@StackOverQuestions 请查看我的答案。 - Nishit Maheta

Answer 1

尝试这段代码：

使用下面的代码删除CSS中的高度属性。 jsfiddle

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

去掉#号，改为点(.)

- Nishit Maheta

Answer 2

这段代码将获取容器 div 的高度，然后在容器 div 中添加 20px。

  $(function () {
      $('#add').on('click', function () {
        $('<p>Text</p>').appendTo('#container');
        heightWithPx =  $('#container').css('height');
        height = heightWithPx.substr(0,heightWithPx.length-2);
        newHeight = parseFloat(height)+20;
        $('#container').css('height',newHeight+'px');
      });
    });

- dadarya