html - 如果另一个 div 有边距，div 将失去其完整高度

Question

我需要所有 div 为 100% 文档高度。它一直有效，直到其中一些有最高利润。在这种情况下，剩余的 div 将失去其完整高度。

我怎样才能将所有 div 的高度拉伸(stretch)到整个文档高度，而​​不管它们中的任何一个的边距？

* {
  .margin: 0;
}
html {
  background: red;
  height: 100%;
}
body {
  max-width: 1366px;
  background: blue;
  height: 100%;
}
#divleft {
  float: left;
  background: lightblue;
  width: 40%;
  height: 100%;
}
#divmiddle {
  float: left;
  margin-top: 25px;
  background: lightgreen;
  width: 40%;
  height: 100%;
}
#divright {
  float: right;
  background: green;
  width: 20%;
  height: 100%;
}

<div id='divleft'>left</div>
<div id='divmiddle'>middle</div>
<div id='divright'>right</div>

这是 fiddle

Answer 1

您的 div 不一定需要 height: 100% 才能达到全高。您可以使用 CSS flexbox 实现此布局，使 div 完全动态化。

您只需要在容器上显示display: flex。

你可以摆脱所有的 float 规则，不需要使用 calc()。

html {
  background: red;
  height: 100%;
}
body {
  display: flex; /* NEW */
  max-width: 1366px;
  background: blue;
  height: 100%;
}
#divleft {
  background: lightblue;
  width: 40%;
}
#divmiddle {
  margin-top: 25px;
  width: 40%;
  background: lightgreen;
}
#divright {
  width: 20%;
  background: green;
}

<div id='divleft'>left</div>
<div id='divmiddle'>middle</div>
<div id='divright'>right</div>

revised fiddle

flex 容器的初始设置是align-items: stretch。这意味着容器的子元素(也称为“flex 元素”)将占用横轴 中的可用空间，在本例中为垂直/高度。