为什么我的孩子div不显示其包装纸

Question

我遇到了一个对我来说没什么意义的问题。

我有一个包装纸div，其中有两个孩子div。

一个div设置为height: 600px的静态height，另一个div具有height设置，可动态占用其父容器的height，即具有height: 100%。

但是，与动态height的DIV完全没有出现。

html：

<div class="wrapper">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

CSS：

.div1 {
    background-color: red;
    width: 20%;
    height: 100%;
    display: inline-block;      
}
.div2 {
    background-color: blue;
    width: 60%;
    height: 600px;
    display: inline-block;
}
.wrapper {      
    background-color: green;
}

我希望div1动态占用父 div的高度，其中高度本质上是由div2设置的。

不幸的是，我无法使用CSS Flexbox，因为我需要支持此项目的较旧IE浏览器。

这是一个易于访问的JSFIDDLE：https：//jsfiddle.net/y8gdbzd6/22/

Answer 1

为什么不将固定的高度 height: 600px给父级，然后将 height: 100%应用于下面的子元素

.div1 {
  background-color: red;
  width: 20%;
  display: inline-block;
  vertical-align: top;
  height: 100%;
}
.div2 {
  background-color: blue;
  width: 60%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
}
.wrapper {
  background-color: green;
  height: 600px;
}

<div class="wrapper">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

Answer 2

您的父元素（.wrapper）没有高度集，其默认高度为auto。要使.div1填充父容器，您必须首先设置父的高度，因为您的.div1告诉浏览器给它的高度100％的父母高度。

示例：如果将父母的高度设置为600px并将.div1的高度设置为50%，则将是父母高度的300px或一半。

Answer 3

height:100%没有服用，因为其父 div没有 height。因此，请给予其父母div的特定高度。现在我给了height:100vh到.wrapper类。

body{margin:0}
.div1 {
  background-color: red;
  width: 20%;
  height: 100%;
  display: inline-block;  
  vertical-align:top;
}
.div2 {
  background-color: blue;
  width: 60%;
  height: 600px;
  display: inline-block;
}
.wrapper {
  background-color: green;
  height:100vh;
}

<div class="wrapper">
  <div class="div1"></div>
  <div class="div2"></div>
</div>