jQuery div的高度变化

时间:2013-10-17 13:21:45

标签: javascript html jquery equals

考虑以下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做到这一点?

2 个答案:

答案 0 :(得分:1)

如何使用以下插件在div的大小调整上添加事件:

所以喜欢$(window).resize(),然后是div

benalman.com/projects/jquery-resize-plugin

答案 1 :(得分:0)

您无需脚本来同步高度。只需在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>