绝对定位div内容溢出原因及适配内容解决方案咨询

嘿，这个问题我之前也踩过坑，其实是绝对定位元素的特性在搞怪，我给你掰扯清楚，再给你对应的解决办法：

为什么会出现内容溢出？ #

绝对定位的元素是脱离正常文档流的，但默认情况下它的高度应该是自适应内部内容的。你碰到溢出的情况，大概率是下面两种原因之一：

1. 给绝对定位的div设置了固定高度/最大高度：如果你给蓝色盒子加了height: 200px这类固定值，当内容高度超过这个值时，自然就会溢出；
2. 内部内容是脱离文档流的元素：比如内部是浮动元素、绝对定位的子元素，这类元素不会“撑开”父容器的高度，父容器感知不到它们的存在，就会出现内容溢出的情况。

怎么让蓝色盒子适配内容高度？ #

针对不同的原因，对应不同的解决办法：

情况1：父容器设置了固定高度 #

直接去掉固定的height属性，或者把它换成min-height（可以给个最小高度，防止内容为空时容器太难看）：

.blue-box {
  position: absolute;
  border: 2px solid blue;
  /* 去掉height: 200px; 或者换成下面的min-height */
  min-height: 100px; /* 可选，按需设置 */
}

情况2：内部内容是脱离文档流的元素 #

子元素是浮动元素

这种情况最常见，给父容器加一个清除浮动的规则就行：
首先定义clearfix样式：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后给你的蓝色盒子加上这个类：

<div class="blue-box clearfix" style="position: absolute; border: 2px solid blue;">
  <!-- 内部浮动内容 -->
</div>

子元素是绝对定位元素

绝对定位的子元素不会撑开父容器高度，这时候可以考虑：

• 把子元素的position: absolute换成position: relative（如果布局允许的话）；
• 或者用JavaScript动态计算子元素的高度，然后设置给父容器；
• 现代浏览器也可以直接给父容器加height: fit-content，强制它适配内容高度：

.blue-box {
  position: absolute;
  border: 2px solid blue;
  height: fit-content;
  width: fit-content; /* 如果宽度也需要适配内容的话加上这个 */
}

用Flex布局替代旧布局

如果你的布局允许，直接把父容器改成display: flex，不管内部是浮动还是其他元素，父容器都会自动适配内容高度：

.blue-box {
  position: absolute;
  border: 2px solid blue;
  display: flex;
}

总结 #

先排查蓝色盒子有没有设置固定高度，再看内部内容是不是脱离了文档流，对应上面的方法调整，就能让盒子完美适配内容啦！

内容的提问来源于stack exchange，提问作者Jason Kelly