Question

我有一个简单的三列（div）页面，其中心内容列由两个侧边栏限定。我的侧边栏将保持相对静态，内容列是动态的页面到页面。我的目标是确保侧边栏保持与内容列相同的高度，并在将CSS中的内容混合在一起后，我认为一个简单的JQuery解决方案将更加清晰。输入以下代码：

$(document).ready(function () {
    setDivAttributes();
});

function setDivAttributes() {
    $("#sidebar-left").height($("#content").height());
    $("#sidebar-right").height($("#content").height());
}

这种方法很完美，当它运行时就存在问题。我无法让这段简单的代码可靠地运行。它在JSFiddle中工作正常，但是当我在各种浏览器中运行它时，我会得到不一致的行为。有时它会加载完美。有时我需要刷新一次，有时需要刷新一次，有时候我必须重新启动任何浏览器。我想也许代码在内容div完成加载之前运行，但我遇到的每个解决方案都无法解决问题。

我怀疑有一个简单的解决方案，但到目前为止它已经避开了我。

Answer 1

使用简单的flex布局你根本不需要任何javascript。您只需将内容和侧边栏包装在Flex容器中，然后为其赋予宽度。

你最终会得到干净的CSS

.flexLayout {
  display:flex;
  background:black;
}

#content {
  flex:1;
  background:white
}

#sidebar-left,
#sidebar-right {
  width: 180px;
}

DEMO ：https://jsfiddle.net/g3a2670e/1/

Answer 2

@ilwcss的答案确实有效。

但是，如果你想要一个jQuery解决方案，试试这个：

$(document).ready(function(){

  setDivAttributes();

  $(window).on('resize', setDivAttributes);

  function setDivAttributes(){
    $("#sidebar-left, #sidebar-right").css({
      height: $('#content').height()
    });
  }

});

您发布的代码使用.height(value)代替.css('height', 'value')，这可能会导致您根据jQuery documentation声明的问题，如下所述：

请注意，.height()将始终返回内容高度，无论CSS box-sizing属性的值如何。从jQuery 1.8开始，这可能需要检索CSS高度加box-sizing属性，然后在元素具有box-sizing: border-box时减去每个元素上的任何潜在边框和填充。为避免此罚款，请使用.css( "height" )而不是.height()。

请注意，我还添加了$(window).on('resize', setDivAttributes);以确保侧边栏的高度与内容div相同，以防用户调整浏览器大小（即移动纵向方向为横向）。

使用JQuery在div上设置height属性会产生不一致的行为

2 个答案: