文章目录
- CSS 中的高度、滚动与溢出：从 height 到 overflow 的完整理解
- 页面高度-height和min-height
- 1. 页面高度是如何被决定的？
- 1.1 height：把容器高度“定死”的方式
- 1.2 height：100vh的实践
- 2.min-height：允许页面“自然生长”的高度策略
- 3.height 和 min-height 的核心差异总结
- 溢出处理-overflow 和text-overflow
- 4.当内容超出时，overflow 决定了“谁来处理”
- 5.文本溢出：最小粒度的溢出控制
CSS 中的高度、滚动与溢出：从 height 到 overflow 的完整理解
问题链路：
内容多了 → 容器怎么办 → 页面谁来滚 → 文本怎么截
关键词：
CSS、height、min-height、overflow、text-overflow
页面高度-height和min-height
1. 页面高度是如何被决定的？
1.1 height：把容器高度“定死”的方式
height 是“定死的高度”
- 容器高度强制等于视口高度
- 内容再多，也不允许把容器撑高
- 内容超出只能：
- 被裁剪（overflow: hidden）
- 或在内部滚动（overflow: auto）
overflow 一般不推荐写在最外层容器上，而应该写在「子容器」或「纯视觉容器」上。
滚动不推荐浏览器接管，而应该由各个页面中使用
所以元素默认的 overflow 都是visible
内容超出容器也没关系，照样显示出来，不裁剪、不滚动
1.2 height：100vh的实践
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{height:100%;margin:0;overflow:hidden;}.container{height:100vh;background-color:rgba(255,165,0,0.08);}</style></head><body><divclass="container"></div></body></html>- 去掉了本身 body 自带的 margin，排除了页面本身高度大于视口高度，浏览器接管页面滚动，出现滚动条的情况
- 为了避免浏览器总是接管滚动，主流做法是给 body 加上 overflow：hidden
- 当前容器是 height：100vh，默认的 overflow:visable，不会显示滚动条
当前加入大量的测试文字后：
<div class="container-text"> <p>这是一段测试文字</p> <p>这是一段测试文字</p> ...在 overflow：visable 的情况下，只能显示当前视口看到的无法滚动
设置为 overflow:auto,显示滚动条，通过滚动能看到全部内容
.container-text{height:200px;overflow:auto;}- 因为设置了 height 的高度为 200px，所以滚动条的范围也是 200px
设置为 overflow：hidden后，会显示根据设置好的高度 height：200px，把超过 200px 的内容截掉
2.min-height：允许页面“自然生长”的高度策略
min-height:100vh;它的真实含义是：
- 至少和视口一样高
- 如果内容变多：
- 容器会自然被内容撑高
- 页面滚动由浏览器正常接管
3.height 和 min-height 的核心差异总结
min-height:100vh 和 height：100vh
其中的height:100vh,
不管你里面有多少内容,高度永远等于视口高度
内容多了就只能：
• 溢出
• 被裁剪
• 或者触发滚动（取决于 overflow）
min-height: 100vh
含义是：
- 至少占满一屏
- 内容多了，我可以继续往下长
- 滚动交给浏览器或父容器
一句话：我先铺满一屏，不够我再长
溢出处理-overflow 和text-overflow
4.当内容超出时，overflow 决定了“谁来处理”
overflow：容器级
控制内容超过元素尺寸时，这个元素怎么办。
overflow: visible | hidden | scroll | auto;解释说明：
| 值 | 意思 |
|---|---|
| visible | 溢出也照样显示（默认） |
| hidden | 超出就裁掉 |
| scroll | 永远显示滚动条 |
| auto | 超出才显示滚动条 |
5.文本溢出：最小粒度的溢出控制
text-overflow：文字级
控制一行文字溢出时的显示方式。
text-overflow: clip | ellipsis;常见只有一个用法：
text-overflow:ellipsis;超出显示 …
text-overflow 不能单独用
text-overflow 必须搭配三件套
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;| 属性 | 作用 |
|---|---|
| white-space: nowrap | 强制单行 |
| overflow: hidden | 把溢出的裁掉 |
| text-overflow: ellipsis | 裁掉的地方显示 … |
