防止身高 100% 的 div 长大 - CSS

有时候我们会在 HTML 中设置一个 div 的高度为 100%，但并不希望它随着内容的增加而变得不可控。这时候就需要用到一些 CSS 技巧来防止 div 长大。

1. 使用 min-height

使用 min-height 可以设置 div 的最小高度，当内容增加时，div 高度会自适应，但不会超过设置的最小高度。

div {
  min-height: 100px;
}

2. 使用 overflow

使用 overflow 属性，可以设置 div 内容溢出时的处理方式。常用的值有 hidden、auto、scroll。当设置为 hidden 时，超出部分会被隐藏，其他两个值会出现滚动条。这样即使内容增加，div 本身的高度也不会改变。

div {
  height: 100px;
  overflow: auto; /* 或者 scroll 或 hidden */
}

3. 使用绝对定位

使用 position 属性和 top、bottom 定位可以让 div 高度不受内容变化影响。只需要设置 top 和 bottom 两个值即可。

div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0; /* 或 right: 0 */
}

总结

以上三种方法都可以防止身高 100% 的 div 长大，选择哪种方法需要根据实际情况来决定。使用 min-height 更容易理解和实现，但会影响到上下布局。使用 overflow 可以控制滚动条的出现，适用于内容不固定的场景。使用绝对定位可以让 div 完全脱离文档流，不受其他元素的影响。