Динамически изменять размер div в соответствии с динамическим контентом?

Question

У меня есть контейнер, называемый div, который содержит динамически созданный контент (абзацы) через javascript. Проблема в том, что парагфы не показаны на div после того, как они выходят за пределы контейнера. Чтобы решить эту проблему, я попробовал переполнение, но только что добавил x, y полосы прокрутки.

То, что я пытаюсь сделать, это увеличить высоту контейнера после добавления каждого добавленного параграфа, то есть когда абзац добавлен в контейнер высотой 20 пикселей, контейнер увеличивает высоту до еще 40 пикселей для следующего абзаца.

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 и добавит 20px в контейнер div.

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