Question

第一次发布海报 - 我会尝试适应:) 我的页面左边有一个div，宽度为75％，右边有一个侧边栏，垂直列中有四个div。我希望那些侧边栏divs与主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";

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

我可能使用表格获得正确的结果，但是＆＃34;一般来说，Web开发人员认为基于表格的布局是一个禁忌＆＃34; - 这对我自己的生活造成了不必要的困难吗？我开始在我的网站中使用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 column布局，并将要均匀分配的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>

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

在响应式网站中垂直分发div

3 个答案: