Question

好的，我正在网站上工作。基本上，网站（或至少我正在处理的页面）遵循以下基本结构：

http://img202.imageshack.us/img202/4010/d5e81039c2c1443aa2a2db9.png

标题，左侧边栏，内容（未显示，页脚）

左侧边栏和内容必须相等（较小的扩展到较大的高度）。侧边栏有时会有更高的高度，有时候是内容。内容区域具有流体宽度，而侧边栏具有静态宽度。内容区域使用AJAX在用户点击内容时动态地将内容加载到其中。

我还有一个用AJAX和PHP内置的主题转换器，用户可以选择不同的配色方案，标题类型以及固定或流畅的布局。

侧边栏和内容的基本设置是：

<div id="main">
  <div id="sidebar"></div>
  <div id="content"></div>
</div>

#main {
position: relative;
width: 100%;
overflow: hidden;
border-bottom: 1px solid #dddddd;
}

#sidebar {
width: 239px;
padding: 0px 0px 0px 15px;
background: #f6f6f6;
border-right: 1px solid #ddd;
position: relative;
}

#content {
position: relative;
background: #fff;
top: 1px;
margin-left: 280px;
padding-top: 10px;
}

无论如何，这是它的主旨。无论如何，我拥有它，无论选择固定或流畅的布局样式，当侧边栏高度大于内容时，一切都能正常工作。然而，当内容高度大于侧边栏高度时，侧边栏高度仅填充侧边栏部分（即，它不向内延伸至内容部分）。现在，可以通过向侧边栏部分添加position：absolute来轻松修复此问题，如果内容高度大于侧边栏高度。

所以基本上，我需要知道是否可以对侧边栏div的高度和内容div的高度进行连续动态比较，当内容div的高度大于侧边栏div的高度时添加位置：绝对到侧边栏div（并删除位置：如果侧边栏div的高度大于内容div的高度，则为绝对位置。）

对不起，如果我不是很清楚，如果您不理解或有任何问题，请随时让我澄清一切。

感谢您提供的任何帮助！

目前，当侧边栏高度大于内容的时候：

http://i.imgur.com/h6AWSdR.png（这很好）

目前，当侧边栏高度小于内容的时候：

http://img845.imageshack.us/img845/9093/11d97de76d7d499389bc6a2.png（这很糟糕---侧边栏需要位置：绝对添加到它来纠正）

编辑：

感谢尼尔森，到目前为止，我几乎可以工作。

现在我有：

<script>
  $(document).ready(function() {
    if ($('#contentbody-wrapper').prop('offsetHeight') > $('#sidebar').prop('offsetHeight') ) {
      $('#sidebar').css('position','absolute');
    } else { $('#sidebar').css('position','relative'); }

  $('#contentbody-wrapper').on('ajaxComplete', function() {
    if ($('#contentbody-wrapper').prop('offsetHeight') > $('#sidebar').prop('offsetHeight') ) {
      $('#sidebar').css('position','absolute');
    } else { $('#sidebar').css('position','relative'); }
   });
});
</script>

它适用于页面加载，但是如果你单击一个按钮用ajax加载的内容替换内容它可以工作，但是如果你点击按钮拉回原始内容，它会给它位置：相对时它应该是绝对的，然后如果你再次点击按钮再次加载ajax内容，它然后给它位置：绝对时它应该是相对的。然后，如果您再次单击该按钮以加载原始内容，则会为其指定正确的位置：relative，并且当您再次单击ajax内容加载按钮时，它会给出正确的位置：absolute。

所以它似乎每隔一段时间都有效......

Answer 1

正如您所说内容 div通过ajax调用加载其内容时，您可以侦听global ajax event ajaxComplete，这会在您的内部任何时候触发ajax调用时触发想要的div容器，就像你的内容父div一样，然后检查高度。

这样的事情：

$('#content_container').on('ajaxComplete', function() {
   setTimeout(function() {
      if ($('#content_container').prop('offsetHeight') > $('#sidebar').prop('offsetHeight') ) {
         $('#sidebar').css('position','absolute');
      }
   }, 300); //check for heights after 300ms of ajaxComplete event
});

<强>更新
更新以在ajax完成后检查小超时中的高度，以便为DOM提供额外的时间来更新新维度。

不断地比较一个div高度与另一个div高度，两者都包含动态内容

1 个答案: