Html div高度填充剩余的空白

我正试着做我的橙色div，以获得高度上所有的空白。我使用1920x1080监视器。当我在页面中打开底部代码时，在红色、蓝色和绿色div下有空白。我想要橙色的div把我的红、蓝、绿div移下来，填满它们下面的空白

这个想法是网站自动填充浏览器窗口，而无需滚动条

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

有人能告诉我为什么会这样，我的错误在哪里，我怎样才能防止它

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

.wrapper{
位置：相对位置；
}
.粉红{
背景颜色：粉红色；
高度：100px；宽度：100%；
位置：相对位置；
}
.橙色{
背景颜色：橙色；
高度：700px；宽度：100%；
位置：相对位置；
保证金：0px 0px 0px 0px；
}
瑞德先生{
背景色：红色；
高度：300px；宽度：33.33%；
位置：相对位置；
浮动：左；
}
蓝先生{
背景颜色：蓝色；
高度：300px；宽度：33.33%；
位置：相对位置；
浮动：左；
}
格林先生{
背景颜色：绿色；
高度：300px；宽度：33.33%；
位置：相对位置；
浮动：左；
}

---

将其包含在您的

样式中

：

body{
    margin:0;
    padding:0;
} 

---

在您的

样式中包含以下内容：

body{
    margin:0;
    padding:0;
} 

将
橙色
和
粉色
包装在与前三个分开的div中，并使用
display:flex在那个分区上

通过对父div使用
display:flex
，对子div使用
flex:1
，可以创建三个div-eualwidth。您不必使用
width:33.33%


html，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
.包装纸{
位置：相对位置；
保证金：0；
填充：0；
显示器：flex；
最小高度：100vh；
弯曲方向：立柱；
}
.粉红{
背景颜色：粉红色；
高度：50px；
宽度：100%；
位置：相对位置；
弹性收缩：0；
}
.橙色{
背景颜色：橙色；
身高：100%；
宽度：100%；
位置：相对位置；
保证金：0px 0px 0px 0px；
弹性收缩：0；
柔性生长：1；
}
.wrapper 2{
位置：相对位置；
保证金：0；
填充：0；
弹性收缩：0；
宽度：100%；
高度：100px；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
}
瑞德先生{
背景色：红色；
身高：100%；
位置：相对位置；
浮动：左；
弹性：1；
}
蓝先生{
背景颜色：蓝色；
身高：100%；
弹性：1；位置：相对；
浮动：左；
}
格林先生{
背景颜色：绿色；
身高：100%；
弹性：1；位置：相对；
浮动：左；
}
将
橙色
和
粉色
包装在前三个div的单独div中，并使用
显示：flex在那个分区上

通过对父div使用
display:flex
，对子div使用
flex:1
，可以创建三个div-eualwidth。您不必使用
width:33.33%


html，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
.包装纸{
位置：相对位置；
保证金：0；
填充：0；
显示器：flex；
最小高度：100vh；
弯曲方向：立柱；
}
.粉红{
背景颜色：粉红色；
高度：50px；
宽度：100%；
位置：相对位置；
弹性收缩：0；
}
.橙色{
背景颜色：橙色；
身高：100%；
宽度：100%；
位置：相对位置；
保证金：0px 0px 0px 0px；
弹性收缩：0；
柔性生长：1；
}
.wrapper 2{
位置：相对位置；
保证金：0；
填充：0；
弹性收缩：0；
宽度：100%；
高度：100px；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
}
瑞德先生{
背景色：红色；
身高：100%；
位置：相对位置；
浮动：左；
弹性：1；
}
蓝先生{
背景颜色：蓝色；
身高：100%；
弹性：1；位置：相对；
浮动：左；
}
格林先生{
背景颜色：绿色；
身高：100%；
弹性：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;
}

请检查此
为父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;
}

请检查这个
这就是你的意思吗

我利用了

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

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


编辑：我更新了小提琴。整理一下代码。
这就是你的意思吗

我利用了

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

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


编辑：我更新了小提琴。稍微整理一下代码。
你的意思是背景中的空白吗？尽管你的问题不清楚，你可以将红色的宽度相等，通过使用flexbox，蓝色和绿色。@dreamhunter您想提供什么信息使我的问题更清楚？您是指背景中的空白吗？jsfiddle您的问题不清楚您可以均衡红色的宽度，通过使用flexbox实现蓝色和绿色。@dreamhunter您想提供什么信息来让我的问题更清楚？@ZzozZ我想这就是您打算用橙色的那个做的，但我仍然不确定最后三个（红色、绿色、蓝色）。如果你能再解释一下这些应该是什么样子的话。它会让你的滚动条上下浮动。我想要一个divs来填充浏览器窗口而不需要Scroolbar。好的。现在试试
wrapper
有三个垂直部分：
pink
、
orange
和
wrapper2
。而
wrapper2
有三个水平分区
red
、
blue
和
green
。现在
wrapper2
和
pink
具有固定的高度，但无论屏幕大小如何
橙色
都将填充屏幕的其余部分，而不会出现任何边框。除非屏幕上有太多内容。@zzozi