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

我有一个名为container的div，它包含通过javascript动态创建的内容（段落）。问题是，一旦这些典范超越了容器的边界，它们就不会出现在div上。为了解决这个问题，我尝试了溢出，但只添加了x，y滚动条

我想做的是在每增加一个paragraph之后增加容器的高度，也就是说，当段落被添加到高度为20px的容器中时，对于下一个段落，容器的高度会进一步增加到40px

HTML

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

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

Javascript

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

$（函数（）{
$（'#添加'）。在（'单击'，函数（）{
$（“Text
”）.appendTo（“#container”）；
});
});

有什么建议吗？谢谢大家!

试试这段代码

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

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

$（'Text
）.appendTo（'.container'）；

---

删除#并放置点（.）

此代码将获得容器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');
      });
    });

$（函数（）{
$（'#添加'）。在（'单击'，函数（）{
$（“Text
”）.appendTo（“#container”）；
heightWithPx=$（“#容器”）.css（'height'）；
高度=带PX.substr的高度（0，带PX.length-2的高度）；
newHeight=parseFloat（高度）+20；
$（'#container'）.css（'height'，newHeight+'px'）；
});
});

我看不出您在增加任何内容。请在从css代码中删除高度后再试一次我不知道为什么问题会被否决？只需从

CSS

code中删除

height

。它解决了你的问题。是的，但我也在尝试摆脱滚动条。@StackOverQuestions检查我的答案。

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