javascript - jQuery div 的高度变化

Question

考虑以下 html 布局：

<div class="wrapper">
  <div class="sidebar-left"></div>
  <div class="main-content">
    <div class="main-content-inner"></div>
  </div>
</div>

.main-content并.sidebar-left获得内联高度，由使用 javascript/jQuery 的 equalheights 函数设置

中的内容.main-content是动态的，因此会发生变化（ajax，上传字段，...）。.main-content-inner当高度不再等于时，应在两个元素上重新应用 equalheights 函数.main-content

我怎样才能用 javascript/jQuery 做到这一点？

Answer 1

如何使用以下插件在调整 div 大小时添加事件：

如此喜欢$(window).resize()，但对于 div

benalman.com/projects/jquery-resize-plugin

Answer 2

您不需要编写脚本来同步高度。只需在 css 中使用一些新的选择器，如下所示：

CSS：

.wrapper {
  position:relative;
}
.sidebar-left {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 330px; /* Example */
  padding: 15px; /* Example */
}
.main-content {
  margin-left: 350px;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

HTML：

<div class="wrapper">
  <div class="sidebar-left"></div>
  <div class="main-content">
    <div class="main-content-inner"></div>
  </div>
</div>