html 插入后重新计算 div 高度

Question

我有一个 div "track-panel"，其中包含另一个 div "summaries"，一开始是空白的。

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css';
#track-panel { border: 1px solid; }

<div id="track-panel">
  <section class="summary">
    <div class="clearfix">Foo</div>
    <div class="col-md-12" id="summaries"></div>
  </section>
</div>

但是，有时我在 "summaries" 中插入了一些文本，它显示在 "track-panel" 之外。

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css';
#track-panel { border: 1px solid; }

<div id="track-panel">
  <section class="summary">
    <div class="clearfix">Foo</div>
    <div class="col-md-12" id="summaries">Bar</div>
  </section>
</div>

Answer 1

问题是如果文档的最小宽度为 992px，.col-md-12 会浮动。但是，您没有清除浮动。

您不需要浮动它，所以只需删除 class。

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css';
#track-panel {
  border: 1px solid;
}

<div id="track-panel">
  <section class="summary">
    <div class="clearfix">Foo</div>
    <div id="summaries">Bar</div>
  </section>
</div>

html 插入后重新计算 div 高度

Recalculate div height after html insertion

html

css

jquery

twitter-bootstrap