Question

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

我写了这个jsfiddle让你明白。

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“red”不会调整大小。

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>

在调整页面大小时调整其他div中div的大小

1 个答案: