身体标签溢出(自动,可见?)

use*_*937 8 css

为什么身体元素不使用overflow-y: auto它仍然表现相同?

我相信它默认为visible,但它是如何实际工作的?

Qua*_*cal 5

body(和html)标签是特殊情况,是在DOM层次结构的根,并且如果他们被设置为浏览器都必须使这些auto

overflowW3的CSS 2.1 中的文档对此进行了概述:

UA必须将在根元素上设置的“溢出”属性应用于视口。当根元素是HTML“ HTML”元素或XHTML“ html”元素,并且该元素具有HTML“ BODY”元素或XHTML“ body”元素作为子元素时,用户代理必须改为应用'overflow'属性如果根元素上的值是“ visible”,则从第一个此类子元素到视口。用于视口的“可见”值必须解释为“自动”。从中传播值的元素必须具有“可见”的“溢出”使用的值。


Jon*_*lik 5

必须为此研究一些白皮书。该body元素是 DOM 中的特殊元素,并且具有一些“伪不可变”属性,我将在答案中介绍这些属性。

首先,W3C 立场文档指出了以下几点:

BODY 元素定义了一个特殊的隐式容器,具有以下属性:

  • 它的位置、宽度、高度和剪切区域由用户代理确定,并且不能修改。
  • 它为子元素建立一个坐标系,原点位于文档的逻辑左上角。

知道了这一点,我们深入研究了这些属性对于 body 的默认值。设置positionstatic最终使其heightwidth属性从父html元素继承。

我发现这个文档有点奇怪,因为我可以更改heightbody 元素上的值并在其周围设置边框:

body {
  border: 1px solid black;
  background-color: #1db3e7;
  height: 100px;
  width: 30em;
  margin: 0 auto;
  border-top: none;
  padding: 1em;
}
Run Code Online (Sandbox Code Playgroud)
<body>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis dolor eget risus ultrices mattis. Maecenas dolor est, malesuada ac efficitur sed, cursus quis nibh. Sed vulputate arcu molestie ipsum pharetra hendrerit vitae ac mauris. Duis quis purus quis elit varius convallis. Proin dictum nec purus eget accumsan. Suspendisse dignissim sollicitudin risus. Praesent nec quam in nisl dictum lobortis. Maecenas ultricies purus nec turpis egestas, ultrices elementum arcu pretium. Vestibulum id diam eu arcu placerat ultrices. Donec porta augue magna, eu tristique dui sodales in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst.

</body>
Run Code Online (Sandbox Code Playgroud)

然而,无论我设定什么positionoverflow文本总是有能力超越这个边界的。这说明了财产的不可变性position,但这确实让我对这一说法提出了质疑height

最后,根据元素及其默认值的宽度和高度依赖性html,该元素是实际使滚动条出现的元素。控制页面滚动的第一个条目将位于该元素的第一个子元素上。bodyhtmlpositionbody