jquery - 使用 JQuery 设置 div 的高度属性会产生不一致的行为

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;
}

演示:https://jsfiddle.net/g3a2670e/1/