html - 在调整页面大小时调整另一个 div 中的一个 div 的大小

Question

我想调整另一个 div 中的 div 的大小，该 div 必须比主 div 小。

我写这个 jsfiddle 是为了让你理解。

Jsfiddle

Jsfiddle whit div.resize in % height

HTML:

<div class="container">
 <div class="resize">
  <div class="red">
  </div>
 </div>
</div>

CSS:

.container
{
    width:800px;
    height:500px;
}
html,body{
    height:100%;
    width:100%
}
.resize{
  height:200px;
}

.red{
background-color: red;
height: 50%;
}

我不明白为什么，如果我调整页面大小以及 div“调整大小”，div“红色”不会调整大小。

Answer 1

它工作得很好。添加了一些轮廓，以便您可以看到边缘。

.red div 是其父元素高度的一半。更改父级，您将看到 .red div 更改其高度。

此外，调整浏览器窗口的大小应该不会有任何影响，因为您将 .container 和 .resize 设置为固定像素值。

html,body{
    height:100%;
    width:100% /* Not needed, this is the default */
}

.container {
  width:600px;
  height:150px;
  outline:1px solid black;
}

.resize{
  height:100px;
  outline:1px solid aqua;
}

div.red{
  background-color: red; 
  height: 50%;
}

<div class="container">
 <div class="resize">
  <div class="red"></div>
 </div>
</div>

但是，如果您正在寻找自动调整大小，则不能使用固定值(像素)，您必须使用相对值(百分比、vh、vw、em)，如下所示:

.container {
  width:600px;
  height:10vh; /* 10% the height of the viewport */
  outline:1px solid black;
}

.resize{
  height:75%; /* 75% the height of the parent element */
  outline:1px solid aqua;
}

div.red{
  background-color: red; 
  height: 50%; /* 50% the height of the parent */
}

<div class="container">
 <div class="resize">
  <div class="red"></div>
 </div>
</div>