响应式网格 2 列需要相同的高度答案

【问题标题】：Responsive grid 2 columns need to be the same height响应式网格 2 列需要相同的高度
【发布时间】：2013-01-21 06:17:59
【问题描述】：

我有一个响应式网站，它有一个主要内容区域 (.content-wrapper) 和一个侧边栏区域 (.search-listing)。我需要两列高度相同。目前我正在尝试使用以下内容：

jQuery(document).ready(function() {
    var divone = jQuery(".search-listing").height();
    var divtwo = jQuery(".content-wrapper").height();

    var maxdiv = Math.max(divone, divtwo);

    jQuery(".search-listing").height(maxdiv);
    jQuery(".content-wrapper").height(maxdiv);

});

但问题是.search-listing 在页面上的起始位置比.content-wrapper 更远。你可以在这里看到它：

http://landpros.turnpostinteractive.com/LandPros_Results_2.html

侧边栏的高度相同，但我需要减去一些像素，因为 div .search-listing 在页面上的起始位置与 .content-wrapper 不同。

任何帮助将不胜感激！

【问题讨论】：

为什么不将两个容器都包装在一个顶级容器中呢？保留 .content-wrapper 并在其中放入 .content 和 .search-listing？
我已经用 .results-outside-wrapper 包装了这两个元素，这样行吗？
我在您的代码中的任何地方都看不到 .results-outside-wrapper div。我猜它会起作用的。如果没有，请尝试为包装器中的两个 div 赋予高度属性（高度：100%）或类似的东西。
不需要让.sidebar和.content_wrapper一样吗？这两个似乎都从页面的同一部分开始。
否 @ChrisHerbert 因为映射部分没有背景颜色。设计师希望它在该部分透明。

标签： jquery html css

【解决方案1】：

如果 .content-wrapper 高于 .map、.search-listing 和 .search-listing-header 的总和，请将 .search-listing 设置为 .content-wrapper 减去 .map 和 .search- 的高度列表标题。

如果 .map 和 .search-listing 之和高于 .content wrapper，则将 .content-wrapper 的高度设置为 .map、.search-listing-header .search-listing 之和。

<script type="text/javascript">
jQuery(document).ready(function() {
    var searchListing = jQuery(".search-listing").height();
    var wrapper = jQuery(".content-wrapper").height();
    var mapping = jQuery(".map").height();
    var header = jQuery(".search-listing-header").height();

    if ( wrapper > searchListing+mapping+header ) {
      jQuery(".search-listing").height(wrapper-mapping-header);
    }

    else {
      jQuery(".content-wrapper").height(searchListing+mapping+header);
    }

});
</script>

【讨论】：

是的，我认为这会奏效。我遇到了语法错误，但这就是我想要做的背后的理论！！！！
再试一次，我把变量名弄乱了。在我的脑海中很难做到这一切。
非常感谢您的帮助！意味着一吨！
我看到了问题。把它改回原来的样子，我会更新我的答案。
很奇怪。我觉得我们超级亲密。

【解决方案2】：

可能clone作者得到了answer

【讨论】：