Постоянное сравнение высоты одного div с другим, оба из которых содержат динамический контент

Итак, я работаю над веб-сайтом. По сути, веб-сайт (или, по крайней мере, страница, над которой я работаю) следует этой базовой структуре:

Заголовок, левая боковая панель, контент (и не показан, нижний колонтитул)

Левая боковая панель и контент должны быть одинаковой высоты (меньший расширяется до высоты большего). Иногда боковая панель имеет большую высоту, иногда контент. Область содержимого имеет изменчивую ширину, а боковая панель имеет статическую ширину. Область содержимого использует AJAX для динамической загрузки содержимого, когда пользователь щелкает объекты.

У меня также есть средство смены темы, встроенное в AJAX и PHP, где пользователь может выбирать различные цветовые схемы, типы заголовков и фиксированный или гибкий макет.

Базовая настройка боковой панели и контента:

<div id="main">
  <div id="sidebar"></div>
  <div id="content"></div>
</div>

#main {
position: relative;
width: 100%;
overflow: hidden;
border-bottom: 1px solid #dddddd;
}

#sidebar {
width: 239px;
padding: 0px 0px 0px 15px;
background: #f6f6f6;
border-right: 1px solid #ddd;
position: relative;
}

#content {
position: relative;
background: #fff;
top: 1px;
margin-left: 280px;
padding-top: 10px;
}

В любом случае, это суть. Во всяком случае, у меня так, что независимо от того, выбран ли фиксированный или гибкий стиль макета, все работает отлично, когда высота боковой панели больше, чем содержимое. Однако, когда высота контента больше, чем высота боковой панели, высота боковой панели заполняет только раздел боковой панели (т. е. не доходит до содержимого). Теперь это можно легко исправить, добавив position: absolute в раздел боковой панели, ЕСЛИ высота содержимого больше высоты боковой панели.

Итак, в основном, мне нужно знать, возможно ли выполнить непрерывное динамическое сравнение высоты div боковой панели и высоты div контента, и когда высота div контента больше, чем высота div боковой панели добавить position: absolute к div боковой панели ( и удалите position: absolute, если высота div боковой панели становится больше, чем высота div содержимого).

Извините, если я не очень ясно выразился, не стесняйтесь просить меня уточнить что-либо, если вы не понимаете или у вас есть какие-либо вопросы.

Спасибо за любую помощь, которую вы можете предоставить!

В настоящее время, когда высота боковой панели больше, чем содержимое:

https://i.imgur.com/h6AWSdR.png (это хорошо)

В настоящее время, когда высота боковой панели меньше, чем содержимое:

http://img845.imageshack.us/img845/9093/11d97de76d7d499389bc6a2.png (это плохо --- боковой панели нужно добавить position: absolute для исправления)

РЕДАКТИРОВАТЬ:

Благодаря Нельсону, пока у меня это почти работает.

Прямо сейчас у меня есть:

<script>
  $(document).ready(function() {
    if ($('#contentbody-wrapper').prop('offsetHeight') > $('#sidebar').prop('offsetHeight') ) {
      $('#sidebar').css('position','absolute');
    } else { $('#sidebar').css('position','relative'); }

  $('#contentbody-wrapper').on('ajaxComplete', function() {
    if ($('#contentbody-wrapper').prop('offsetHeight') > $('#sidebar').prop('offsetHeight') ) {
      $('#sidebar').css('position','absolute');
    } else { $('#sidebar').css('position','relative'); }
   });
});
</script>

Он работает при загрузке страницы, но затем, если вы нажмете кнопку, чтобы заменить содержимое загружаемым с помощью ajax содержимым, оно сработает, но если вы нажмете кнопку, чтобы вернуть исходное содержимое, оно присвоит ему позицию: относительную, когда она должна быть абсолютной, а затем, если вы снова нажмете кнопку, чтобы снова загрузить содержимое ajax, он даст ему position: absolute, когда он должен быть относительным. Затем, если вы нажмете кнопку, чтобы снова загрузить исходный контент, он даст ему правильное положение: относительное, и оно даст правильное положение: абсолютное, когда вы снова нажмете кнопку загрузки содержимого ajax.

Так что это, кажется, работает каждый раз...