Javascript div不会随着动态内容的增长而增长

我有一个名为content的外部div和一个input按钮

单击按钮，我动态创建了一个div并将其附加到content div

新的潜水艇是可拖曳的

如果我拖动div，则内容div会完美增长，但如果我一直单击“添加div”按钮，则内容不会增长到包含内部div

另外，如果我将div向上移动，如何使内容缩小

这是一张照片

匹配小提琴的代码

#content {
display: block;
position:relative;
top:215px;
width:600px;
margin:auto;
height:auto;
border:1px solid red;
padding:0px;
min-height:300px;
}

#button {
position:absolute;
top:10px;
left:25px;
}

var i = 1;
var p = 50;
$('input[type=button]').click(function () {
p = p + 75;
i++;
var newdiv = document.createElement('div');
newdiv.setAttribute('id', 'draggable' + i);
newdiv.style.position = "absolute";
newdiv.style.top = +p + "px";
newdiv.style.left = "20px";
newdiv.style.border = '1px solid #000';
newdiv.style.display = 'inline-block';
newdiv.style.width = '75px';
newdiv.style.height = '75px';
newdiv.innerHTML = "draggable inner div";
document.getElementById("content").appendChild(newdiv);

var g = $('#draggable' + i);
var o = $('#content');
g.draggable({
    constraint: "#content",
    drag: function (event, ui) {
        if (g.position().top > o.height() - g.height()) {
            o.height(o.height() + 5);
            return true;
        }           
    },

    scroll: false
});

});

 <div id="content"></div>
 <form>
     <input type='button' name='button' id='button' value='add a div'>
  </form>

#内容{
显示：块；
位置：相对位置；
顶部：215px；
宽度：600px；
保证金：自动；
高度：自动；
边框：1px纯红；
填充：0px；
最小高度：300px；
}
#钮扣{
位置：绝对位置；
顶部：10px；
左：25px；
}
var i=1；
var p=50；
$（'input[type=button]'）。单击（函数（）{
p=p+75；
i++；
var newdiv=document.createElement（'div'）；
newdiv.setAttribute（'id'，'draggable'+i）；
newdiv.style.position=“绝对”；
newdiv.style.top=+p+“px”；
newdiv.style.left=“20px”；
newdiv.style.border='1px solid#000'；
newdiv.style.display='inline block'；
newdiv.style.width='75px'；
newdiv.style.height='75px'；
newdiv.innerHTML=“可拖动的内部div”；
document.getElementById（“内容”）.appendChild（newdiv）；
变量g=$（“#可拖动”+i）；
变量o=$（“#内容”）；
g、 拖拉的({
约束条件：“#内容”，
拖动：函数（事件、ui）{
如果（g.位置（）.顶部>o.高度（）-g.高度（））{
o、 高度（o.高度（）+5）；
返回true；
}           
},
卷轴：假
});
});

如果浮动容器和要附加的节点，当内容超过容器的高度时，它将展开

此外，我还将您通过javascript设置的样式从javascript中提取出来，并将它们放入css中

CSS:

JS:

---

JS Fiddle:

如果将容器和要附加的节点浮动，当内容超过容器的高度时，它将展开

此外，我还将您通过javascript设置的样式从javascript中提取出来，并将它们放入css中

CSS:

JS:

JS Fiddle:

试试这个

你只需要更新高度

$("#content").height(o.height()+g.height());

试试这个

你只需要更新高度

$("#content").height(o.height()+g.height());

---

只需添加一个函数来计算内部divs的位置，然后调整内容的高度。 （也许有一种纯粹的css方式我不知道。）

---

下面是一个例子。

只需添加一个函数来计算内部divs位置，然后调整内容的高度。 （也许有一种纯粹的css方式我不知道。）

这是来自JSFIDLE的。

我建议您为div draggable的父级创建新的div，并将css float:left添加到div content和div draggable中。两个div将自由定位，而不是相互依赖

<div id="content"></div>
<div id='subcontent'></div>

#content {
    float:left;
}

newdiv.style.float = 'left';
document.getElementById("subcontent").appendChild(newdiv);

#内容{
浮动：左；
}
newdiv.style.float='left'；
文件.getElementById（“分包”）.appendChild（newdiv）；

我修改了一些代码，如中所示

JS小提琴：

在这段代码中，当您将div draggable移动到靠近注释顶部时，div内容将加上高度并移动到顶部-1px（相同的顶部位置）。

从JSFIDLE开始

我建议您为div draggable的父级创建新的div，并将css float:left添加到div content和div draggable中。两个div将自由定位，而不是相互依赖

<div id="content"></div>
<div id='subcontent'></div>

#content {
    float:left;
}

newdiv.style.float = 'left';
document.getElementById("subcontent").appendChild(newdiv);

#内容{
浮动：左；
}
newdiv.style.float='left'；
文件.getElementById（“分包”）.appendChild（newdiv）；

我修改了一些代码，如中所示

JS小提琴：

---

在这段代码中，当您将div draggable移动到注释顶部附近时，div content将加上高度并移动到顶部-1px（相同的顶部位置）。

在旁注中，您应该添加destroy（）以移除克隆位置，这样当您单击add div时，它不会进入底部否我不想销毁克隆，我用它作为一个例子，在页面上的不同位置添加动态创建的div。可能是重复的帖子。不，这是一个与宽度有关的不同问题，答案是在内容div中添加滚动条。我需要内容div根据内部div的位置进行增长和收缩。在一个侧注中，您应该添加()要删除克隆的位置，当您单击“添加div”时，它不会进入底部否我不想销毁克隆，我将其用作在页面上的不同位置添加动态创建的div的示例。可能是重复的帖子。否，这是一个与宽度不同的问题，答案是在内容div中添加滚动条。我需要内容div根据内部div的位置进行增长和收缩。仅当添加的div的高度为30px且直接添加到另一个div的下方时，此操作才有效。如果每个div不同，并且在页面上随机添加，则此操作将不起作用。此外，如果您单击按钮5-6次，则div将落在内容之外，这将只会导致如果添加的div的高度为30px，并且直接添加到另一个div的下方，则此操作无效。如果每个div都不同，并且在页面上随机添加，则此操作无效。此外，如果您单击按钮5-6次，则div位于内容之外

var container = $("#content");
function setHeight() {
    var maxHeight = 0;
    $("div", container).each(function(i, v) {
        maxHeight = Math.max($(v).position().top + $(v).height(), maxHeight);
    });
    if (container.height() != maxHeight) {
        container.height(maxHeight);
    }
}

<div id="content"></div>
<div id='subcontent'></div>

#content {
    float:left;
}

newdiv.style.float = 'left';
document.getElementById("subcontent").appendChild(newdiv);