html - <html> 宽度小于其背景

标签 html css width

我在 <html> 上设置了样式:

html {
    background: #ECECEC;
    border: 1px solid #FFFFFF;
}

如果页面内容比页面宽,为什么边框停止了,背景却一直在继续?

这是一个显示问题的 fiddle :http://jsfiddle.net/rPGyc/3

最佳答案

html 是一个合适的 block 级元素,就像 bodypdiv 等 —因此,它遵守与其他 block 元素相同的所有溢出规则。

但是,当内容超出其宽度(或当其宽度小于浏览器窗口或视口(viewport)的 100%)时,html 的背景会溢出其边框的原因是背景颜色传播到视口(viewport),它是包含 html 及其所有呈现内容的 Canvas 。但是,边框仍然是 html 元素的一部分,因此当内容溢出时该元素不会展开。此行为与如何将背景应用于 body 而不是 html 导致 body 背景传播到根元素非常相似,如 this answer 中所述。其中引用了this section of the spec .

作为Alohci notes in a comment在答案下,关于视口(viewport),这同样适用于 html:

Note that html behaves with respect to the viewport in much the same way as body behaves with respect to html, with the background escaping beyond the confines of the html element. See http://jsfiddle.net/GmAL4/4/ to see what I mean.

关于html - <html> 宽度小于其背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11083984/

相关文章:

html - 如何设置背景图片

javascript - 在 chrome 扩展中使用 html5 blob 下载 mp3 文件

html - 仅在悬停 div 时使保存在 div 中的 img 变亮/发光

css - gulp-recess 不会改变属性顺序

html - 如何包装 div 的大小以最适合内容,比如在 Facebook Chat 上?

angular - 如何在 PrimeNG 中增加 pTooltip 的宽度

html - 让按钮启动选项选择下拉菜单

html - 如何使用 IE 11 在以前版本的 IE 上全面测试我的网站?

javascript - Owl Carousel 全高给出空白页

Android - SurfaceView(宽度,高度)问题