css孙元素继承父元素高度

CSS中的孙元素也能够继承父元素的高度，只需要使用一些特殊的属性来实现。

.parent {
    height: 200px;
    position: relative;
}
.child {
    position: absolute;
    bottom: 0;
}
.grandchild {
    height: 100%;
}

如上述代码，首先给父元素设置一个确定的高度，并将其定位为相对定位。然后，在子元素中，使用绝对定位，并将其定位在父元素底部。

接下来，对于孙元素，设置其高度为100%，这样就能够继承父元素的高度了。此时，如果孙元素的内容超出父元素高度，内容将会溢出到父元素的下方。

这种方法适用于只有一个孙元素的情况。如果存在多个孙元素，并且需要它们都继承父元素的高度，可以将孙元素们设置成Flex布局，并将它们的容器设置为Flex容器。

.parent {
    height: 200px;
    display: flex;
    flex-direction: column;
}
.child {
    flex: 1;
}
.grandchild {
    height: 100%;
}

如上代码所示，首先将父元素设置为Flex容器，强制子元素以列方向排列。然后，将子元素的Flex布局设置为1，表示它们在高度上平均分配空间。最后，孙元素继承父元素高度的方法与前面一致。

总之，使用CSS孙元素继承父元素的高度是一种非常实用的技巧，在页面布局中非常常见，相关的CSS属性也有很多，需要仔细学习和掌握。