溢出 | CSS-Tricks 中文

CSS 年鉴 → 属性 → O → 溢出

Sara Cope 于 2022 年 1 月 3 日

overflow 属性控制超出其边界的内容的显示方式：想象一个你显式设置为 200px 宽的 div，但它包含一个 300px 宽的图像。默认情况下，该图像将超出 div 并 可见。而如果将 overflow 值设置为 hidden，图像将被裁剪至 200px。

div {
  overflow:  visible | hidden | scroll | auto | inherit
}

值

visible：当内容超出其框时不会被裁剪。这是该属性的默认值
hidden：溢出的内容将被隐藏。
scroll：类似于 hidden，但用户可以滚动隐藏的内容。
clip：当内容超出其框时被裁剪。这可以与 overflow-clip-margin 一起使用来设置裁剪区域。
auto：如果内容超出其框，则该内容将被隐藏，同时应显示一个滚动条供用户查看剩余内容。
initial：使用默认值 visible
inherit：将溢出设置为其父元素的值。

请记住，文本会自然地在元素末尾换行（除非更改空白），因此文本很少会导致溢出。除非设置了高度，否则文本只会使元素更高。当显式设置宽度和高度并且不希望任何内容溢出时，或者显式避免滚动时，溢出会更常见地出现。

`visible`

如果你根本没有设置 overflow 属性，则默认值为 visible。因此，通常没有理由将该属性显式设置为 visible，除非你要覆盖它从其他地方的设置。

这里要记住的重要一点是，即使内容在框外可见，该内容也不会影响页面的流动。例如

通常，你不应该在包含网页文本的框上设置静态高度，因此它不应该出现。

`hidden`

默认 visible 的反面是 hidden。这会将任何超出框的内容隐藏起来。

这在与动态内容一起使用时特别有用，因为溢出可能会导致严重的布局问题。但是，请记住，以这种方式隐藏的内容是完全不可访问的（除了查看源代码）。例如，用户将默认字体大小设置为比你预期的更大，你可能会将文本推到框之外并将其完全隐藏在他们的视野之外。

`scroll`

将框的 overflow 值设置为 scroll 将隐藏超出框的内容，但会提供滚动条以滚动框的内部以查看内容。

值得注意的是，无论如何你都会获得水平和垂直滚动条，即使内容只需要其中一个。

可以使用 -webkit-overflow-scrolling 为该值启用 iOS 的动量滚动。

注意：在 OS X Lion 中，当滚动条设置为仅在使用时显示时，scroll 的行为更像是 auto，即只有需要的滚动条才会显示。

`auto`

自动溢出与 scroll 值非常相似，只是它解决了在你不需要滚动条时出现滚动条的问题。只有当内容实际上超出元素时，滚动条才会显示。

overflow-x 和 overflow-y

也可以使用 overflow-x 和 overflow-y 属性来水平或垂直地操作内容的溢出。例如，在下面的演示中，可以滚动浏览水平溢出，而超出框高度的文本将被隐藏

.box {
  overflow-y: hidden;
  overflow-x: scroll;
}

清除浮动

设置溢出的最流行用途之一，奇怪的是，是浮动清除。设置溢出不会清除元素处的浮动，它会 自我清除。这意味着具有溢出（除 visible 以外的任何值）的元素将扩展到它需要的大小以包含其中的浮动子元素（而不是折叠），假设未声明高度。像这样

更好的浮动清除技术是 clearfix，因为它不需要以你不需要的方式改变溢出属性。

生成块级格式化上下文

值得注意的是，overflow 还会创建一个新的块级格式化上下文，如果我们要将一个块级元素与一个浮动元素对齐，这将很有用。在下面的示例中，我们展示了多个段落默认情况下如何与浮动图像交互，然后我们使用 overflow: hidden 将文本与其自身框对齐

这来自 Nicole Sullivan 的一篇很棒的文章，它启发了媒体对象。

滚动条可以用 CSS 样式化吗？

以前你可以在 IE 中设置滚动条样式（v5.5？），但现在不行了。你可以在 WebKit 浏览器中再次设置滚动条样式。如果你需要跨浏览器的自定义滚动条，请查看 JavaScript。

如果元素需要附加滚动条以符合溢出值，Firefox 会将它们放在元素外部，保持声明的可见宽度/高度。IE 会将滚动条放在内部，保持声明的总宽度/高度。

演示

本文的演示取自此示例页面。

浏览器支持

此浏览器支持数据来自Caniuse，其中有更多详细信息。数字表示浏览器从该版本开始支持该功能。

桌面

Chrome	Firefox	IE	Edge	Safari
90	81	11	90	16.0

移动设备 / 平板电脑

Android Chrome	Android Firefox	Android	iOS Safari
127	127	127	16.0

float

.element { float: right; }

Sara Cope

Cameron

# 2012 年 3 月 30 日

不错的东西……但我想要提一下“overflow-x”和“overflow-y”CSS 属性。它们有时会很有用！

faiz al-qurni

# 2012 年 4 月 21 日

非常有用，谢谢 :D

mohammedakmal

# 2012 年 11 月 11 日

您好，在 Android 操作系统中，overflow: scroll; -webkit-overflow-scrolling: touch; 不受支持

Sumit Gera

# 2012 年 12 月 23 日

您好，感谢您的努力！但我一直在处理一个问题。我在一个 div 元素中有一个五组图像的幻灯片，网页布局是流畅的。在 div 元素上使用溢出，要么在 div 元素上添加滚动条，要么会裁剪图像（看起来很奇怪）。请给我一些建议，这样图像就不会溢出。

Selva Thibagar

评论永久链接# 2016 年 10 月 7 日

使用 overflow-x:hidden; 这样更好

Laura Dwyer

# 2012 年 12 月 30 日

我的天啊，我想拥有你的孩子。我已经在 IE9 中处理了这个没有滚动条的问题四个小时了，您提出的解决方案，即去掉 overflow: visible，让浏览器默认使用滚动条，真是太棒了。谢谢！

meizitang strong version

# 2013 年 5 月 2 日

这就是这些骗子们兜售的“大肆宣传”。

Paul Kane

# 2013 年 5 月 14 日

Chris,

当容器元素没有固定宽度时，这是否可行？换句话说，包装器没有显式设置，而是由页面包装器或主体定义？（换句话说，“100%”）

我想创建一个可滚动的子导航，它可以拥有与移动设备视窗一样大的宽度，并且可以根据屏幕方向进行调整。

Paul Kane

评论永久链接# 2013 年 5 月 14 日

我应该澄清一下，它只应沿着 x 轴滚动。
Bill Frost

评论永久链接# 2015 年 4 月 4 日

这个问题有答案吗？我有同样的需求。谢谢，Bill。问题是“..当容器元素没有固定宽度时是否可行？换句话说，包装器没有显式设置，而是由页面包装器或主体定义？（换句话说，“100%”）”
Vincent

评论永久链接# 2018 年 6 月 4 日

这毫无疑问太晚了，但我上周确实很想得到这个问题的答案，所以这里是我想出来的办法。

我一直无法用其包含元素的“100%”宽度来实现，但一旦我切换到“vw”单位（视窗大小的 1% 的单位），事情就变得非常容易。如果你打算以视窗的全部宽度来做，那么“100vw”是一个很好的“100%”替代方案。

在我的特定情况下，我实际上想要将一个水平可滚动元素放置在固定宽度列的旁边。由于使用“100%”一直给我带来麻烦，我在其中添加了一个“calc()”来从总视窗中减去列的宽度：`calc(100vw - 470px)`。

JRMLSTF

# 2013 年 7 月 24 日

我需要使用 `overflow-x: hidden` 和 `overflow-y: auto` 来移除 Chrome Android 中的滚动条，不幸的是它还会移除 Safari iOs 中的动量滚动。我添加了 -webkit-overflow-scrolling: touch，Safari iOs 又获得了动量滚动。它太棒了，它为我节省了数小时的时间，谢谢 Chris！

Balakrishna Gajam

# 2013 年 8 月 3 日

很棒的文章……

Shubhra

# 2013 年 8 月 22 日

在第一种情况下，我不希望图像从 div 中伸出并可见，`overflow: hidden` 对 Safari 无效。你知道有什么解决方法吗？我读到 Safari 在位置和溢出方面存在一个 bug。我删除了位置完成，但它仍然给了我同样的问题，你能否提出你可能针对 Safari 的任何解决方法？

示例代码

.box {
    width: 200px;
    position: relative;
    overflow: hidden;
    height: 350px;
    margin: 53px 29px 10px 29px;
    background-image: url(../images/backgroundcardboard.png);
    background-repeat: repeat;
    -webkit-box-shadow: 0 0 5px 1px #888;
    box-shadow: 0 0 5px 1px #888;
    border-radius: 10px;
    z-index: 2;
}

Kim

# 2013 年 9 月 11 日

有没有办法让一个固定位置的物体在移动设备内在其容器中滚动？

Gavin

# 2013 年 9 月 21 日

注意：你不能在 `<fieldset>` 标签上使用 `overflow:auto` 或 `overflow:scroll`，至少在 Firefox 中是这样。其他浏览器可能也适用。将你的溢出 CSS 放在一个 `<div>` 中。

Damian

评论永久链接# 2013 年 10 月 15 日

我的经验是你可以，但为什么要这样做呢……我认为 `fieldset` 的目的应该是与一个 `legend` 一起使用，在这种情况下，如果你滚动，你的 `legend` 会与你的文本重叠，看起来很糟糕。我同意你，在这种情况下，应该在 `fieldset` 内的 `div` 上使用溢出选项，如果你不打算使用 `legend`，那么可以使用带边框的 `div` 而不是 `fieldset`。
Gavin

评论永久链接# 2013 年 10 月 15 日

是的，这本来就不是一个好主意。我只是想在这里记录一下，因为弄清楚发生了什么事花了一些时间，我不想让其他人犯同样的错误。

当然，类似的事情也会发生在 `<td>` 标签上……即，有些样式规则对某些标签不起作用（根本不起作用，或者与预期不同，或者在不同的浏览器中表现不同），在这种情况下，在内部包装一个 `<div>` 并对其进行样式设置，通常是最简单的解决方法。

Yashodhan

# 2013 年 9 月 23 日

很有信息性。我一定会感谢用简单的语言解释复杂的科技事物。

ayo

# 2013 年 9 月 27 日

有没有办法让上面的示例中的图像完美地缩放到容器指定的宽度，就像响应式图像一样，没有任何部分被截断？

Damian

# 2013 年 10 月 15 日

如果是背景图像，你可以将大小设置为包含。

#element {
    background: url(images/your_image.png) no-repeat center center;
    background-size: contain;
}

Ralph Trinidad

评论永久链接# 2014 年 5 月 16 日

……如果它是元素，只需使用 `max-width: 100%;` 声明。

Mohamed Adhuham

# 2013 年 10 月 15 日

太棒了！它帮助了我。

Edgar C.

# 2014 年 3 月 17 日

感谢你写这篇文章！

我有一个快速的问题，我正在使用静态高度和宽度来在响应式设计中制作可点击的大方框。我将属性设置为相对定位并隐藏溢出，以便它们很好地对齐，但在 Safari 中隐藏溢出不起作用。有什么想法可以使其生效？

同时，我将使用你推荐的清除修复并浮动元素。谢谢！

Terf

# 2014 年 3 月 25 日

要删除不需要的水平滚动条，我认为你可以使用 `overflow-y: scroll; overflow-x: hidden;`
它保留垂直滚动条，同时删除水平滚动条。

Priyanga

# 2014 年 5 月 24 日

如何更改滚动条的颜色？

Rama Krishna

# 2015 年 1 月 7 日

如何在 Android 和 iOS 上都显示滚动条……

Saulo Bruno Matos Venancio

# 2015 年 4 月 3 日

太棒了

Rutger

# 2015 年 6 月 25 日

很棒的文章！我目前在 Android 4.4.2（三星平板电脑）上遇到了无法让溢出容器滚动的麻烦。你的演示在同一设备上运行良好。在我的手机（Android）和其他测试设备（iPhone、iPad）上，它运行正常。

有谁知道 Android 中的 `overflow: scroll` 或 `overflow: auto` 问题吗？或者有人遇到过同样的问题吗？

我无法提供开发代码，但我认为所有相关的 css 都在那里。

.box { 
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 35em;
}

任何帮助都会很棒！

Antek

# 2015 年 7 月 7 日

嗨，我在 `overflow-x:hidden` 和 `overflow-y:visible` 上遇到了问题。这里有一个例子：https://jsfiddle.net/31mkqbwp/2/ 为什么当我将 `overflow-x:hidden` 设置为 `#container` 时，`overflow-y:visible` 不起作用，并且始终存在垂直滚动条？

Irshad

# 2016 年 5 月 13 日

您好，我试图在一个具有 `overflow:scroll` 的 div 中添加多个选择，但下拉菜单位于 div 中，它必须出现在 div 之外。你能否建议我如何解决这个问题？

https://jsfiddle.net/irshadmb/a3z5ccax/

msbdexter2611

# 2016 年 6 月 9 日

溢出标签不起作用？！
我想创建一个 200x200 的整个 div 元素，像这样
http://weedbeats.com/resident-djs/
当您将鼠标悬停在艺术家的图像上……

HTML 代码
”’

你好
200X200

”’

CSS 代码
”’#a
{
width: 200px;
height: 200px;
overflow: hidden;
background-color: #cc4400;
}
#b
{
position: absolute;
height: 100px;
width: 200px;
padding: 0;
margin: 0;
transform: translatey(200px);
background-color: #404040;
transition-property: all;
transition-duration: 1s;
}
#c
{
position: absolute;
width: inherit;
height: inherit;
margin: 0;
}
#a:hover > #b
{
transform: translatey(100px);
background-color: 606060;
}”’

msbdexter2611

评论永久链接# 2016 年 6 月 9 日

HTML 代码

你好
200X200

wdtime.ru

# 2016 年 11 月 11 日

https://wdtime.ru/css/overflow-css-perepolnenie-elementa

Sufi

# 2017 年 7 月 19 日

IOS Safari 滚动不起作用。以下是代码。有人知道问题出在哪里吗？

.chat-holder{
    padding: 20px 10px;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

Ke1van

# 2020 年 4 月 6 日

你好，谢谢你的这篇文章，但我想知道如何只对元素的一侧显示溢出，比如只对顶部或左侧显示溢出。

michael

# 2020年9月26日

非常感谢，解释得很清楚。我使用过几次，但无法得到明确的解释。再次感谢。

Diego

# 2024年1月14日

有没有可能添加一个部分来解释hidden和clip值之间的区别？

值

visible

hidden

scroll

auto