Question

我有一个响应式网站，其中包含主要内容区域（.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不同。

非常感谢任何帮助！

Answer 1

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

如果.map和.search-listing的总和高于.content包装器，请将.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>

Answer 2

可能clone作者获得了answer

响应网格2列需要具有相同的高度

2 个答案: