Question

我遇到了一个对我没有多大意义的问题。

我有一个包装div和两个孩子div。

一个div设置为height的{{1}}，另一个height: 600px设置div以动态占用height它的父容器，即它有height。

然而，动态height: 100%的div根本没有出现。

HTML：

height

CSS：

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

我希望.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设置。

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

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

Answer 1

为什么不将固定高度height: 600px提供给父div，然后将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课程。

＆＃13;

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

＆＃13;

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

＆＃13;

为什么我的孩子不会在其包装div中显示？

3 个答案: