在 html 或 body 中设置全局变量答案

【问题标题】：setting globals in html or body在 html 或 body 中设置全局变量
【发布时间】：2012-06-12 08:30:53
【问题描述】：

我对我发现的以下 css 有一些疑问：

html, body {
    height:100%;
    min-width:100%;
    position:absolute;
}

html {
    background: none repeat scroll 0 0 #fff;
    color:#fff;
    font-family:arial,helvetica,sans-serif;
    font-size:15px;
}

html 和 body 是否有必要将高度和最小宽度设置为 100%？有什么好处？
使用绝对位置的原因是什么？
为什么他们在 html 而不是 body 上设置背景/颜色/字体？有区别吗？还是只是偏好？

【问题讨论】：

标签： html css

【解决方案1】：

通常没有必要。但是，有时您可能需要它。例如，也许您的基本/站点范围的网站 css 文件指定了不同的大小（您知道那些边只是边框的站点，通常是博客？这些宽度已被缩小）。请注意，当您有百分比时，它属于父容器。所以 Div A 可能有 width: 100% 但如果它的父容器有 width: 500px Div A 将有 100% 的 500px。
我能想到的 html + body 上没有position: absolute 的理由。绝对定位的一个副作用是元素不再与其余元素“内联浮动”（不知道您将如何描述/措辞）。

例如，position: relative 会忽略绝对定位的元素。因此，如果您有图像 A（绝对）和图像 B（相对）并且 B 有 left: 10px;，则图像 B 将从父级的左侧偏移，而不是 A 的位置。希望我在这里说得通。

所以有时我只要有背景图片就设置“位置：绝对”。如果它是第一个子元素，它的所有内容都会显示在它上面（因为新元素“添加在顶部”并忽略绝对定位元素）。
body 将继承这些属性，所以是的，这只是偏好。

【讨论】：

我绝对理解绝对定位的作用，我的问题是专门针对它对 body 和 html 元素的影响。对我来说这似乎很奇怪，因为 html 上方没有任何内容，所以我不明白定位它的好处或用途。
我不知道对html或body有什么特殊效果，可能是不必要的冗余：P

【解决方案2】：

将元素的宽度或高度设置为 100% 仅在其父元素也为该尺寸的 100% 时才有效。这意味着如果 body 甚至 html 标签由于某种原因不是高度或宽度的 100%，则其中具有这些属性的元素将具有 0 高度或宽度。

例如：http://jsfiddle.net/KZaum/

【讨论】：