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通过等高函数设置

.main-content中的内容是动态的，因此会更改（ajax，upload-fields，...）。当.main-content-inner的高度不再等于.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>

jQuery div的高度变化

2 个答案: