CSS/JavaScript技术动态强制2个div为较大div的大小

我有两个div，一个主要内容部分和一个侧边栏

我想做的是强制每个div与最高的div具有相同的高度

如果边栏内容比主内容高，我想向下推主内容以匹配边栏内容的高度

+--------------------+----------+
|  Main Content      | Sidebar  |
|                    |          |
|                    |          |
|                    |          |
|                    |          |
|  END               |          |
| __________________ |          |
|                    |          |
|                    |          |
|                    |  END     |
|                    | ________ |
+--------------------+----------+

+--------------------+----------+
|  Main Content      | Sidebar  |
|                    |          |
|                    |          |
|                    |          |
|                    |          |
|                    |  END     |
|                    | ________ |
|                    |          |
|                    |          |
|  END               |          |
| __________________ |          |
+--------------------+----------+    

相反，如果主要内容比边栏内容高，我想向下推边栏内容，以匹配主要内容的高度

+--------------------+----------+
|  Main Content      | Sidebar  |
|                    |          |
|                    |          |
|                    |          |
|                    |          |
|  END               |          |
| __________________ |          |
|                    |          |
|                    |          |
|                    |  END     |
|                    | ________ |
+--------------------+----------+

+--------------------+----------+
|  Main Content      | Sidebar  |
|                    |          |
|                    |          |
|                    |          |
|                    |          |
|                    |  END     |
|                    | ________ |
|                    |          |
|                    |          |
|  END               |          |
| __________________ |          |
+--------------------+----------+    

所以看起来是这样的：

+--------------------+----------+
|  Main Content      | Sidebar  |
|                    |          |
|                    |          |
|                    |          |
|                    |          |
|                    |          |
|                    |          |
|                    |          |
|                    |          |
|   END              |  END     |
| __________________ | ________ |
+--------------------+----------+

---

您是否可以使用jQuery或其他框架来推断最高div的高度，然后相应地设置其他div的高度

if($('#mainContent').height() >= $('#subContent').height()) {
    $('#subContent').height($('#mainContent').height());
}
else
{
    $('#mainContent').height($('#subContent').height());
}

您想要的是，这可以通过CSS实现，而不需要任何javascript

---

还有其他方法可以做到这一点，包括jQuery。有关更多信息，请参阅。

我需要它更具动态性，因为我不知道最高div的大小。CSS解决方案是动态的，两列的高度始终相同。