Question

我使用以下函数分析两列（内容和侧边栏）并确保div的高度相等。此功能仅在列需要增加大小时才有效。因此，当内容大小减小时，它会使列太大。

如何更改此代码以解决内容大小减小的问题（例如，如果窗口大小从中等宽度变为大宽度，以及最高内容高度将减少的位置。）

var sidebarSameHeight = function() {
  //Sidebar Same Height - http://html-tuts.com/make-sidebar-same-height-as-content-div/
  // placing objects inside variables
  var content = $('.core_content_main');
  var sidebar = $('.core_content_sidebar');

  // get content and sidebar height in variables
  var getContentHeight = content.outerHeight();
  var getSidebarHeight = sidebar.outerHeight();

  // check if content height is bigger than sidebar
  if ( getContentHeight > getSidebarHeight ) {
    sidebar.css('min-height', getContentHeight);
  }

  // check if sidebar height is bigger than content
  if ( getSidebarHeight > getContentHeight ) {
    content.css('min-height', getSidebarHeight);
  }
};

sidebarSameHeight();
setInterval(sidebarSameHeight, 250);

Answer 1

当前代码仅检查一列是否高于另一列。您需要重复并反转逻辑以检查一个是否小于另一个。我们每次都不能运行这两个测试（更大或更小），所以如果我们记录之前的高度，我们就可以检查并决定我们需要做什么。

var sidebarSameHeight = function () {

// placing objects inside variables
var content = $('.core_content_main');
var sidebar = $('.core_content_sidebar');

// get content and sidebar height in variables
var getContentHeight = content.outerHeight();
var getSidebarHeight = sidebar.outerHeight();

//get the previous height
var contentOldHeight = content.data("oldHeight");
var sidebarOldHeight = sidebar.data("oldHeight");

//Check if either has reduced - if true use reduce logic for columns
if (contentOldHeight > getContentHeight || sidebarOldHeight > getSidebarHeight) {

   // check if content height is smaller than sidebar
    if (getContentHeight < getSidebarHeight) {
        sidebar.css('min-height', getContentHeight);
    }

   // check if sidebar height is smaller than content
    if (getSidebarHeight < getContentHeight) {
        content.css('min-height', getSidebarHeight);
    }

} else {

    // check if content height is bigger than sidebar
    if (getContentHeight > getSidebarHeight) {
        sidebar.css('min-height', getContentHeight);
    }
    // check if sidebar height is bigger than content
    if (getSidebarHeight > getContentHeight) {
        content.css('min-height', getSidebarHeight);
    }
}

//Set data values for next time
content.data("oldHeight", getContentHeight);
sidebar.data("oldHeight", getSidebarHeight);
};

sidebarSameHeight();
setInterval(sidebarSameHeight, 1000);

此jsfiddle示例允许您键入彩色框并查看展开和折叠在一起的框。我将延迟时间提高到一秒钟以使其更加明显。

这可能不是您的完整解决方案，但应该让您在路上。

使列等于高度（上升和下降）

1 个答案: