css子容器超过父容器高度

在css布局中，我们经常会用到父容器和子容器来完成页面的布局。但有时候会遇到一个问题，就是当子容器的高度超出父容器的高度时，会出现一些不符合我们预期的结果，比如滚动条，文本溢出等。下面我们来了解下在css中如何处理子容器超过父容器高度的情况。

父容器 {
  height: 200px;
  overflow: hidden; /* 隐藏超出父容器的子容器内容 */
}
子容器 {
  height: 250px; /* 超出了父容器的高度 */
}

在上面的代码中，我们可以看到通过设置父容器的高度和overflow属性，可以隐藏超出父容器的内容，但并没有解决实际问题，因为隐藏的内容无法展示。那么有没有其他解决方案呢？

我们可以使用“伪元素”来处理这个问题。为父容器添加一个伪元素，在伪元素中添加一个padding-bottom，并设置为子容器高度的百分比。这样就可以保证父容器的高度会根据子容器的高度进行调整，从而实现内容的完整展示。

父容器 {
  position: relative;
}
父容器::after {
  content: ""; /* 必须有 */
  display: block;
  height: 0;
  visibility: hidden; /* 隐藏元素 */
  clear: both;
}
子容器 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
父容器::after {
  padding-bottom: 150%; /* 子容器高度的百分比 */
}

通过上面的代码，我们可以看到父容器会根据子容器的高度进行调整，从而达到完整展示的效果。