Jquery append() 在内部 div 上，同时扩展外部 div，以便内部 div 元素适合内部答案

【问题标题】：Jquery append() on inner div while expanding the outer div so that the inner div elements fits insideJquery append() 在内部 div 上，同时扩展外部 div，以便内部 div 元素适合内部
【发布时间】：2018-01-28 10:28:59
【问题描述】：

我有与此类似的 div 结构。我正在使用 jquery 在带有 id append 的 div 中附加元素。但是，外部 div 不会自动扩展以适应附加的元素。

<div class="well" id='expand'>
    <div class="container">
        <!-- some other divs -->
    </div>
    <div id= "append">
    </div>
</div

我通过增加外部 div 的高度解决了这个问题，即

 var div_height = $('#expand').height();
 $('#expand').css({"height":div_height + append_height})

有没有更好的方法来做到这一点？

【问题讨论】：

外层div有什么CSS？如果你分享一个 jsfiddler 会很棒
没有 css 只是引导'好'。

标签： javascript jquery html twitter-bootstrap-3 append

【解决方案1】：

您可以使用纯 CSS 使用 min-height 和 height:auto 来实现，这会导致 expand DIV 根据其内容调整其高度：

#expand{
    height:auto;
    min-height:50px;
    height:auto !important;  /* for IE as it does not support min-height */
}

还将height:auto !important; 添加到子元素以支持移动设备。

【讨论】：

好的，它适用于我的笔记本电脑，但不适用于我的 ipad，我怎样才能让它响应移动设备？
应该在所有设备上都能正常工作。您是否尝试通过清除缓存来重新加载 CSS？
是的，我清除了缓存。另外，尝试清楚：两者都很好，但没有运气。
什么iOS版本？以及哪个浏览器？
已修复。不过它不需要clear:both。必须将 height:auto !important; 应用于子 div。

【解决方案2】：

这可以通过

#expand{
height: auto;
clear: both;
}

Clear 属性会擦除 div 中的任何浮点值（左或右）。这可以防止由于内部 div 的浮动属性而扩大外部 div 的宽度。如果您对响应能力有任何疑问，可以使用一些简单的 HTML：

<div class="well" id='expand'>
    <div class="container">
        <div><!-- content --></div>
        <br>
        <div><!-- content --></div>
    </div>
    <div id= "append">
    </div>
</div>

添加换行标记可确保 div 跨所有设备移动到下一行。

【讨论】：

【解决方案3】：

.parent {
  display: flex;
  border: 2px solid #222;
  flex-direction: row;
  padding: 10px;
}

.parent .child {
  padding-right: 10px;
  flex-grow: 1;
  width: 33%;
}

.parent .child:last-child {
  padding-right: 0;
}

.parent .child .content {
  border: 1px solid blue;
  height: 100%;
}

.parent .child:first-child .content {
  border: 1px solid red;
}

<div class="parent">
  <div class="child">
    <div class="content">
      blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
      blah blah blah blah blah blah blah blah
    </div>
  </div>
  <div class="child">
    <div class="content">Div 2</div>
  </div>
  <div class="child">
    <div class="content">Div 3</div>
  </div>
</div>

【讨论】：