Question

我有几个

<div class="sidebar"></div><div class="content"></div>

侧边栏和内容的背景不同。因此，如果它们不等于高度，则显示后面的页面。我想用jQuery等于他们的高度。我自己尝试过，但失败了。

注意：侧边栏和内容是对。所以，

 $('.sidebar').height() > $('.content').height() ? $('.content').height($('.sidebar').height()) : $('.sidebar').height( $('.content').height());
});

无效。在这里，总是将第一个侧边栏与第一个内容进行比较（我希望我是对的）。

Answer 1

使用Faux Column CSS技术解决此问题。

使用JavaScript来解决这个问题相当于使用手提钻将木板钉在地板上。如果你的木板不够坚固（JavaScript被禁用或浏览器的实现很差），那么它就会破坏（你的解决方案也是如此）。

就我个人而言，我认为将JavaScript解决方案标记为已接受会向发现此页面的人发送错误信息，并认为这是解决问题的最佳方法。

您有多个侧边栏并不会阻止您使用此解决方案。鉴于以下内容：

<div class="contentSidebarPair">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

您可以使用以下样式：

/* sidebar.gif is simply a 200x1px image with the bgcolor of your sidebar.
   #FFF is the bgcolor of your content */
div.contentSidebarPair {
    background: #FFF url('sidebar.gif') repeat-y top left;
    width: 800px;
    zoom: 1; /* For IE */
}

/* IE6 will not parse this but it doesn't need to */
div.contentSidebarPair:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

div.sidebar {
    float: left;
    width: 200px;
}

div.content {
    float: left;
    width: 600px;
}

有！简单有效。绝对零JavaScript涉及。如果您想创建更复杂的布局（液体布局），您可以使用背景位置调整此技术。一个tutorial is available here。

Answer 2

我建议你用CSS解决这个问题。以下是我在Google上找到的有关此主题的第一页：one，two

Answer 3

这是一个新版本，如果内容和侧边栏对是兄弟姐妹（如代码片段）并且对不在同一节点内，则可以使用，如：

<div>
  <div class="sidebar"></div><div class="content"></div>
</div>
<div>
  <div class="sidebar"></div><div class="content"></div>
</div>


  $(document).ready(function(){
    $('.content').each(function(){
      var sidebar = $(this).siblings('.sidebar');
      sidebar.height() > $(this).height() ? $(this).height(sidebar.height()) : sidebar.height($(this).height());
    });
  });

如果内容和侧边栏都是兄弟姐妹，如下所示：

  <div>
    <div class="sidebar"></div><div class="content"></div>
    <div class="sidebar"></div><div class="content"></div>
  </div>

这是另一种基于兄弟姐妹位置的解决方案：

$('.content').each(function(){
  var sidebar = $(this).prev('.sidebar');
  sidebar.height() > $(this).height() ? $(this).height(sidebar.height()) : sidebar.height($(this).height());
});

Answer 4

首先，确保您有效清理。 Something like this应该为您留下一个可以在没有javascript的情况下使用的网站。

一旦你做完了，这样的事情应该有效：

var sidebarHeight = $("#sidebar").height();
var bodyHeight = ( $("#content").height() );

if ( sidebarHeight > bodyHeight ) {
  $("#wrapper").height(sidebarHeight);
  $("#content").height(sidebarHeight);
  }
else if (bodyHeight > sidebarHeight) {
  $("#sidebar").height(bodyHeight);
  $("#wrapper").height(bodyHeight);
  };

请注意，我假设它包含在div＃wrapper中。

使用jQuery等于侧边栏和内容的大小

4 个答案: