Question

我需要所有div都是100％的文档高度。它起作用，直到其中一些有一个上边距。在这种情况下，剩余的div会失去其全高。

如何将所有div的高度拉伸至完整文档高度，无论其中任何边距如何？

* {
  .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。

您可以删除所有浮动规则，而不需要使用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 items”）将消耗交叉轴中的自由空间，在这种情况下，它是垂直/高度。

Answer 2

您可以使用CSS calc()功能，例如：

#divmiddle{
  margin-top: 25px;
  height: calc(100% - 25px);
}

看看下面的代码段（让我知道这是否适合您）：

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助！

Answer 3

只需从中间div中删除margin属性。

#divmiddle{
  float:left;
  background:lightgreen;
  width:40%;
 height:100%;
}

Answer 4

您只需从高处扣除保证金百分比即可。而不是height: 100%，请使用width: 98%; height: 98%; margin: 1%;或width: 23%; height: 23%; margin: 1%;等

如果另一个div有余量，则div会失去其全部高度

4 个答案: