在响应式网站中垂直分布 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 的大小错误。一般来说，这(几乎)是可以接受的 - 它适用于不同大小的设备，但是当有人调整浏览器窗口大小并且布局搞砸的那一天，我会看起来有点傻。我会使用侦听器吗，我会把它放在哪里？我发现我的脚本必须在 mrrBodydiv 之后。

我使用表格可能会得到正确的结果，但是"一般来说，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";
};

Answer 2

您可以使用基于 flex 的布局。您的 75% 宽度容器和侧栏容器将位于具有 flex 属性的包装容器中。侧边栏也将使用弹性属性。不需要JS。右列项将根据左列的内容调整大小。

.flex-wrap {
display: flex;
justify-content: space-between;
}
.left {
height: 500px;
width: 75%;
display: flex;
}
.left-inner {
background: blue;
border-radius: 6px;
flex-grow: 1;
}
.left, .right {
padding: 5px;
box-sizing: border-box;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
}
.side-content-box {
flex-grow: 1;
padding: 5px;
box-sizing: border-box;
display: flex;
}
.inner {
border-radius: 6px;
background-color: #fff;
box-shadow: 0 0 8px #000;
flex-grow: 1;
}

<div class="flex-wrap">
<div class="left">
<div class="left-inner">
hi
</div>
</div>
<div class="right">
<div class="side-content-box">
<div class="inner"></div>
</div>
<div class="side-content-box">
<div class="inner"></div>
</div>
<div class="side-content-box">
<div class="inner"></div>
</div>
<div class="side-content-box">
<div class="inner"></div>
</div>
</div>
</div>

Answer 3

您可以为此使用 flexcolumn布局，并将要均匀分布的div 设置为flex: 1 0 0，以便它们flex-grow填充父级。

* {margin:0;}

aside {
display: flex;
flex-direction: column;
height: 100vh;
width: 25vw;
}
aside > div {
flex: 1 0 0;
background: #09c;
border-bottom: 1px solid white;
}

<aside>
<div></div>
<div></div>
<div></div>
<div></div>
</aside>