在嵌套div中，一个div的高度会动态增加，另一个div期望获取到父div的高度，但设置height为100%不生效，给出解决方案

可以使用flex布局来解决这个问题，将父div设置为flex容器，子div的高度设置为100%，就可以获取到父div动态变化后的高度了。

HTML代码：

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

CSS代码：

.parent {
  display: flex;
  flex-direction: column;
}

.child1 {
  height: 100%;
}

.child2 {
  flex: 1;
}

这里将父div设置为flex容器，并将子div的高度设置为100%。同时，将另一个子div的flex属性设置为1，这样它就会占据剩余的空间，达到期望获取到父div高度的效果。

相关问题

在嵌套div中，期望横向展示，一个div的高度会动态增加，另一个div期望获取到父div的高度，但设置height为100%不生效，给出解决方案

可以使用flex布局来解决这个问题，将父div设置为flex容器，子div的高度设置为100%，就可以获取到父div动态变化后的高度了。同时，需要将flex容器的flex-wrap属性设置为wrap，这样子元素就能够自动换行了。

HTML代码：

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

CSS代码：

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child1 {
  height: 100%;
  flex: 0 0 auto;
}

.child2 {
  flex: 1 0 auto;
}

这里将父div设置为flex容器，并将子div的高度设置为100%。同时，将另一个子div的flex属性设置为1，这样它就会占据剩余的空间，达到期望横向展示的效果。需要注意的是，为了避免子元素被挤压变形，子元素的flex属性中需要设置第一个值为0，表示不可压缩，第二个值为0，表示不可伸展，第三个值为auto，表示初始宽度为自适应宽度。

有一个div中嵌套着另一个div标签，子div标签的高设置为父div标签的高的80%怎么设置

可以使用CSS中的百分比来设置子div的高度，如下所示：

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  height: 200px; /* 假设父div的高度为200px */
  position: relative; /* 父div设置为相对定位 */
}

.child {
  height: 80%; /* 子div的高度为父div高度的80% */
  position: absolute; /* 子div设置为绝对定位 */
  top: 0; /* 子div距离父div顶部的距离为0 */
  left: 0; /* 子div距离父div左侧的距离为0 */
  width: 100%; /* 子div的宽度与父div相同 */
}

这样设置后，子div的高度就会自动调整为父div高度的80%。需要注意的是，父div需要设置为相对定位，而子div需要设置为绝对定位，才能使百分比高度生效。