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

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

将 height:100% 赋予父 div、body 和 html

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

这是你的意思吗？

我用过

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

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

Fiddle

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

Answer 3

将此包含在您的style：

body{
    margin:0;
    padding:0;
} 

Answer 4

将 orange 和 pink 包装在与最后三个不同的单独 div 中，并在该 div 上使用 display:flex;。

您可以通过对父 div 使用 display:flex 对子 div 使用 flex:1 来制作三个 div eualwidth。你不一定非得使用width:33.33%;

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

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