css子元素占满父元素高度

在Css中，设置一个子元素占满父元素高度是一个经常用到的需求。通常情况下，我们会使用如下代码来实现：

.parent{
  position: relative;
}

.child{
  position: absolute;
  top: 0;
  bottom: 0;
}

css子元素占满父元素高度

在这种情况下，子元素的高度会完全占满父元素的高度。然而，这种方法也有一定的限制：父元素必须有一个已知的高度。如果父元素的高度是由内容决定的（比如说一个包含文字的块），那么我们需要采取其他的方法。

我们可以使用flexBox来解决这个问题。我们只需要将父元素设为一个flex容器，然后将子元素的flex属性设置为1就可以让它占满父元素的高度。

.parent{
  display: flex;
}

.child{
  flex: 1;
}

这里将子元素的flex属性设置为1很重要。如果设置为0，子元素就会跟随内容进行大小调整，而不是占满整个父元素的高度。

最后，我们还可以使用grid布局来达到相同的效果。我们只需要将父元素设为一个grid容器，然后将子元素的grid属性设置为1就可以让它占满整个父元素的高度。

.parent{
  display: grid;
}

.child{
  grid-row: 1;
}

在grid布局中，将子元素的grid-row属性设置为1会将子元素放置在第一行，然后将它的高度拉伸至与父元素一样高。这种方法适用于多个子元素的情况。

无论是使用绝对定位、flexBox、还是grid布局，我们都可以很容易地实现子元素占满父元素高度的效果。选择哪种方法取决于具体的情况和个人喜好。