我有一个简单的三列 (div) 页面,其中一个中心内容列由两个侧边栏界定。我的侧边栏将保持相对静态,内容列在页面之间是动态的。我的目标是确保侧边栏与内容列保持相同的高度,并且在将 CSS 中的某些内容混合在一起之后,我认为一个简单的 JQuery 解决方案会更加清晰。输入以下代码:
$(document).ready(function () {
setDivAttributes();
});
function setDivAttributes() {
$("#sidebar-left").height($("#content").height());
$("#sidebar-right").height($("#content").height());
}
当它运行时,它工作得很完美,但问题就在这里。我无法让这段简单的代码可靠地运行。它在 JSFiddle 中工作正常但是当我在各种浏览器中运行它时,我会得到不一致的行为。有时它会加载完美。有时我需要刷新一次,有时需要多次,有时我必须完全重新启动任何浏览器。我认为代码可能在内容 div 完成加载之前运行,但我遇到的每个解决方案都无法解决问题。
我怀疑有一个简单的解决方案,但到目前为止我还没有找到它。
最佳答案
使用简单的 Flex 布局,您根本不需要任何 JavaScript。 您只需将内容和侧边栏包装在 flex 容器中,然后为其指定宽度。
你最终也会得到干净的 CSS
.flexLayout {
display:flex;
background:black;
}
#content {
flex:1;
background:white
}
#sidebar-left,
#sidebar-right {
width: 180px;
}
关于jquery - 使用 JQuery 设置 div 的高度属性会产生不一致的行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40440083/