Question

我正在努力让我的橙色div获得所有高度的空白区域。我使用1920x1080显示器。当我在页面中打开底部代码时，我在红色，蓝色和绿色div下面有空白区域。我想要橙色div来移动我的红色，蓝色，绿色div，然后填充它们下面的白色空间。

这个想法是站点自动填充浏览器窗口而没有滚动条。

我尝试写100％而不是700px，但当我的属性为100％时，橙色div消失。

有人可以告诉我为什么会发生这种情况，我的错误在哪里，我该怎样才能阻止它。

还有另一种方法可以为我的红色，蓝色和绿色div提供相等的空间吗？我计算出100％的页面除以3是33.3333。这就是为什么我将宽度设置为33.33％，但它没有完全填满页面。

.wrapper{
    position: relative;
}
.pink{
   background-color: pink;
   height: 100px; width: 100%;
   position: relative;
}
.orange{
   background-color: orange;
   height: 700px; width: 100%;
   position: relative;
   margin: 0px 0px 0px 0px;
}


.red{
   background-color: red;
   height: 300px; width: 33.33%;
   position: relative;
    float: left;
}
.blue{
   background-color: blue;
   height: 300px; width: 33.33%;
   position: relative;
    float: left;
}
.green{
   background-color: green;
   height: 300px; width: 33.33%;
   position: relative;
    float: left;
}

<div class="wrapper">
    <div class="pink"></div>
    <div class="orange"></div>
    <div class="red"></div><div class="blue"></div><div class="green"></div>
</div>

Answer 1

给父亲div，body和html提供高度：100％

body, html{
  height:100%;
}
.wrapper{
    position: relative;
    height:100%;
}
.orange{
   background-color: orange;
   height: 100%; width: 100%;
   position: relative;
   margin: 0px 0px 0px 0px;
}

请检查 fiddle 。

Answer 2

将此信息包含在style：

中

body{
    margin:0;
    padding:0;
}

Answer 3

将orange和pink包含在距离最后三位的单独div中，并在该div上使用display:flex;。

您可以使用display:flex对父div和flex:1对子div进行三个div宽度。您不一定要使用width:33.33%;

＆＃13;

html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
.wrapper{
  position: relative;
  margin:0;
  padding:0;
  display:flex;
  min-height:100vh;
  flex-direction:column;
}
.pink{
   background-color: pink;
   height: 50px;
   width: 100%;
   position: relative;
  flex-shrink:0;
}
.orange{
   background-color: orange;
   height:100%;
  width: 100%;
   position: relative;
   margin: 0px 0px 0px 0px;
  flex-shrink:0;
  flex-grow:1;
}
.wrapper2{
  position: relative;
  margin:0;
  padding:0;
  flex-shrink:0;
  width:100%;
  height:100px;
  display:flex;
  flex-direction:row;
  justify-content: space-between;
}
.red{
   background-color: red;
   height:100%;
   position: relative;
   float: left;
   flex: 1;
}
.blue{
   background-color: blue;
   height:100%;
flex: 1;   position: relative;
    float: left;
}
.green{
   background-color: green;
   height:100%;
flex: 1;   position: relative;
    float: left;
}

＆＃13;

<div class="wrapper">
  <div class="pink"></div>
  <div class="orange"></div>
<div class="wrapper2">
  <div class="red"></div>
  <div class="blue"></div>
  <div class="green"></div>
</div>
  </div>

＆＃13;

Answer 4

这是你的意思吗？

我已经使用了

display: table
display: table-row
display: table-cell

橙色div现在将填充窗口的剩余高度。

Fiddle

编辑：我更新了小提琴。稍微整理了一下代码。

div高度填充其余的空白区域

4 个答案: