1

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

页眉、左侧边栏、内容（未显示，页脚）

左侧边栏和内容的高度必须相等（较小的扩展到较大的高度）。有时侧边栏有更大的高度，有时是内容。内容区域具有可变宽度，而侧边栏具有静态宽度。内容区域使用 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 的高度时，添加 position: absolute 到侧边栏 div (并删除 position: absolute 如果侧边栏 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 内容，则它会给它 position: absolute 当它应该是相对的。然后，如果您单击按钮再次加载原始内容，它会给出正确的位置：relative，并且当您再次单击 ajax 内容加载按钮时，它会给出正确的位置：absolute。

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

4

1 回答 1

1

正如您所说，您的内容div 通过 ajax 调用加载其内容，您可以侦听全局 ajax 事件 ajaxComplete，该事件将在您所需的 div 容器（如您的内容父 div）内完成的任何时候触发 ajax 调用，然后检查高度。

像这样的东西：

$('#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 提供额外的时间来更新新尺寸。

于 2013-02-24T19:41:07.643 回答