CSS 中的高度、滚动与溢出：从 height 到 overflow 的完整理解

文章目录

[CSS 中的高度、滚动与溢出：从 height 到 overflow 的完整理解](#CSS 中的高度、滚动与溢出：从 height 到 overflow 的完整理解)
页面高度-height和min-height
- [1. 页面高度是如何被决定的？](#1. 页面高度是如何被决定的？)
- - [1.1 height：把容器高度"定死"的方式](#1.1 height：把容器高度“定死”的方式)
  - [1.2 height：100vh的实践](#1.2 height：100vh的实践)
- 2.min-height：允许页面"自然生长"的高度策略
- [3.height 和 min-height 的核心差异总结](#3.height 和 min-height 的核心差异总结)
[溢出处理-overflow 和text-overflow](#溢出处理-overflow 和text-overflow)
- [4.当内容超出时，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的实践

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="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>
    <div class="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,显示滚动条，通过滚动能看到全部内容

css 复制代码

.container-text{
            height: 200px;
            overflow: auto;
        }

因为设置了 height 的高度为 200px，所以滚动条的范围也是 200px

设置为 overflow：hidden后，会显示根据设置好的高度 height：200px，把超过 200px 的内容截掉

2.min-height：允许页面"自然生长"的高度策略

css 复制代码

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;

常见只有一个用法：

css 复制代码

text-overflow: ellipsis;

超出显示 ...

text-overflow 不能单独用

text-overflow 必须搭配三件套

css 复制代码

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

属性	作用
white-space: nowrap	强制单行
overflow: hidden	把溢出的裁掉
text-overflow: ellipsis	裁掉的地方显示 ...