只有在中心div小于中心div时，才能使中心div与边div相同

当且仅当中心div小于Left SideBar2时，如何让我的中心div与Left SideBar2高度相同？我不确定这是否可以用纯CSS完成，或者我应该如何使用JS以及如何？只有在中心div小于中心div时，才能使中心div与边div相同

My page

来源

2012-12-19 nmelmun

您可以使用媒体查询 –

查看该主题的[这篇文章]（http://css-tricks.com/fluid-width-equal-height-columns/）。让我知道，如果这有助于你！ – jmeas

您的意思是，如果中心div小于仅限Left SideBar2的高度，或者如果中心div中没有足够的内容可以触及Left SideBar 2？ – kyletaylored

这应该用JavaScript来完成......在这里，我将使用jQuery的。将其放入您的标签并进行适当的更改。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript"> 
    (function() { 
     function changeHeight() { 
      $centerDiv = $('#centerDivId'); 
      $leftBar = $('#leftBarId'); 
      if ($centerDiv.height() < $leftBar.height()) { 
       $centerDiv.css('height', $leftBar.height()) 
      } 
     } 
    }); 
</script>

来源

2012-12-19 19:34:46

这段代码不适用于我:(它什么也没做）注意到在$ leftbar引用中有一个输入错误，它应该是$ leftBar – nmelmun

不要紧，让它工作！这个工作完美！谢谢!!! – nmelmun

真棒我很高兴它帮助你了！ –

jQuery(document).ready(function() { 
    var $center = jQuery('.center-selector'); 
    $center.height(getCenterHeight()); 
}); 

var getCenterHeight = function() { 
    var $left = jQuery('.left-sidebar-container-selector'); 
    var $right = jQuery('.right-sidebar-container-selector'); 

    var leftHeight = parseInt($left.height(), 10); 
    var rightHeight = parseInt($right.height(), 10); 

    return Math.max(leftHeight, rightHeight); 
};

来源

2012-12-19 19:36:48 algorhythm

也许你可以使用CSS3 min-height属性设置为中心div的minimum height。

来源

2012-12-19 22:27:23 andi1984

只有在中心div小于中心div时，才能使中心div与边div相同

回答

相关问题