Question

我有一个名为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');
  });
});

有什么建议吗？谢谢！

Answer 1

试试此代码

jsfiddle

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

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

删除＃并放点（。）

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

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

2 个答案: