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

时间:2016-04-22 12:49:09

标签: css

为什么身体元素不会使用overflow-y: auto,但它的行为方式仍然相同?

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

2 个答案:

答案 0 :(得分:4)

body(和html)标记是特殊情况,位于DOM层次结构的根目录中,浏览器必须将这些标记设置为auto

CSS 2.1中的overflow documentation on W3概述了这一点:

  

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

答案 1 :(得分:4)

不得不查看一些白皮书。 body元素是DOM中的一个特殊元素,并且具有一些我将在答案中获得的“伪不可变”属性。

首先,W3C position documentation指出以下内容:

  

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

     
      
  • 它的位置,宽度,高度和裁剪区域由   用户代理,可能不会被修改。
  •   
  • 它建立一个坐标   子元素的系统,原文在​​文档的逻辑上   顶部,左上角。
  •   

了解这一点,我们深入研究了这些属性的默认值。 position设置为static,最终使其heightwidth属性继承自父html元素。

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

body {
  border: 1px solid black;
  background-color: #1db3e7;
  height: 100px;
  width: 30em;
  margin: 0 auto;
  border-top: none;
  padding: 1em;
}
<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>

但是,无论我设置的是positionoverflow,文本总是能够超越此边框。这说明了position属性的不可变性,但确实让我质疑height的陈述。

最后,基于htmlbody元素的宽度和高度依赖关系及其默认{{1},html元素实际上是显示滚动条的内容价值。控制页面滚动的第一个条目将位于position元素的第一个子元素上。