Divs总是加载时父级的高度，并调整jQuery或CSS的大小

在一个名为“main row”的父级中，我有两个名为.lcol和.rcol的列，我希望确保它们始终是父级“main row”的100%高度。这是因为元素在列之间是绝对浮动的，我想确保它们与236px高的元素没有重叠

到目前为止我有

<script type="text/javascript">
jQuery(document).ready(function($){
$(".rcol, .lcol").height($(".main-row").height() + 236);   
});

这很好，但它会将子对象设置为特定的高度，而在调整大小时，它从初始点开始就会被低估

我也只希望在类'base'存在的情况下，并且仅当窗口宽度大于480 px时，触发此操作

正如您所看到的，我正在使用jQuery，但是如果有一种纯CSS的方法来实现它，那将是非常有趣的

非常感谢

格伦尼男孩

更新：

这几乎奏效了

 <script type="text/javascript">
//Initial load of page
jQuery(document).ready(sizeContent);

//Every resize of window
jQuery(window).resize(sizeContent);

//Dynamically assign height
function sizeContent() {
  var newHeight = jQuery(".main-row").height() + "px";
  jQuery(".rcol").css("height", newHeight);
 }
  </script>

---

问题是，每次调整大小时，.lcol都会随着内容的比例逐渐变大。

您能提供一个JSFIDLE吗？或者至少是post.main row CSSPerhaps从这里开始：