-1

次の HTML レイアウトを検討してください。

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

.main-content.sidebar-leftjavascript/jQueryを使用してequalheights関数によって設定されたインラインの高さを取得しています

のコンテンツ.main-contentは動的であるため、変化します (ajax、upload-fields、...)。.main-content-innerの高さが等しくなくなったら、 equalheights 関数を両方の要素に再適用する必要があります。.main-content

javascript/jQueryでこれを行うにはどうすればよいですか?

4

2 に答える 2

1

次のプラグインを使用して、div のサイズ変更時にイベントを追加するのはどうですか。

のように$(window).resize()、それからdivのために

benalman.com/projects/jquery-resize-plugin

于 2013-10-17T13:52:40.703 に答える
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>
于 2013-10-17T13:36:04.550 に答える