css 父级高度靠子级

CSS中父级高度靠子级是常见的一种布局方式。它通过设置子元素的高度为100%来实现父级高度的自适应。

首先，我们需要知道父元素和子元素的盒模型。每个元素都由一个盒子包围，其中包含内容区域、内边距和边框。父元素的高度默认为auto，即根据内容自适应。如果只有父元素的高度自适应，那么子元素的高度就无法自适应。

而通过设置子元素的高度为100%，它就可以占据父元素内部，并且高度会自动适应。样式代码如下所示：

.parent {
  height: 300px;
}

.child {
  height: 100%;
}

上述代码中，父元素的高度被设置为300px，而子元素的高度被设置为100%。子元素会自动适应父元素的高度，并且占据父元素内部。

需要注意的是，父元素的高度必须是固定的。如果父元素的高度也是自适应的，那么子元素的高度也会自适应，从而不能实现我们想要的效果。

在实际使用中，我们可以将父元素的高度设置为百分比，使页面具有更好的响应式表现：

.parent {
  height: 50%;
}

.child {
  height: 100%;
}

上述代码中，父元素的高度被设置为50%，即占据页面高度的一半。子元素的高度也被设置为100%，从而占据父元素内部。

通过使用CSS中的父级高度靠子级，我们可以实现更加灵活和自适应的页面布局。