javascript - 在响应式站点中垂直分布 div

Question

第一次张贴者 - 我会努力适应 :) 我的页面左侧有一个宽度为 75% 的 div，右侧有一个侧边栏，垂直列中有四个 div。随着窗口大小的调整，我希望那些侧边栏 div 与主 div 的高度均匀分布。显然，在这样做时，主 div 的内容将决定该高度。

我用下面的脚本来管理这个。我不知道这是最优雅的解决方案，还是最明智的解决方案，但它似乎对我有用!

var mrrHeight = document.getElementById('mrrBody').clientHeight;
document.getElementById("side1").style.height = (mrrHeight/4)-21 + "px";
document.getElementById("side2").style.height = (mrrHeight/4)-21 + "px";
document.getElementById("side3").style.height = (mrrHeight/4)-21 + "px";
document.getElementById("side4").style.height = (mrrHeight/4)-21 + "px";

现在我需要让它以更实时的方式工作 - 目前它只在加载时工作，并且在调整窗口大小时侧边栏 div 的大小错误。一般来说，这(几乎)是可以接受的——它适用于不同大小的设备，但当有人调整浏览器窗口大小并且布局搞砸时，我会显得有点傻。我会使用监听器吗？我会把它放在哪里？我发现我的脚本必须在 mrrBody div 之后。

我或许可以使用表格获得正确的结果，但是“一般来说，Web 开发人员认为基于表格的布局是一种禁忌”——这是否让我的生活变得不必要地困难？我开始在我的网站中使用 div 正是为了摆脱我旧的基于表格的布局!

Answer 1

您可以使用 window.onresize 事件:

window.onresize = function(event) {
    var mrrHeight = document.getElementById('mrrBody').clientHeight;
    document.getElementById("side1").style.height = (mrrHeight/4)-21 + "px";
    document.getElementById("side2").style.height = (mrrHeight/4)-21 + "px";
    document.getElementById("side3").style.height = (mrrHeight/4)-21 + "px";
    document.getElementById("side4").style.height = (mrrHeight/4)-21 + "px";
};