html - CSS - 绝对定位的全宽元素在缩放后被剪切

Question

一个元素是绝对定位的，并使用设置为 0 的 left 和 right 属性使其成为全宽

问题是，当窗口被缩放时，元素只在视口(viewport)处全宽。下面的图片详细解释了这个问题

是否有任何 CSS hack 可以解决此问题。

要测试的 JSfiddle:http://jsfiddle.net/vaakash/kdgJp/

Answer 1

您可以执行以下操作:

body {
position:relative;
float:left;
}

#header {
width:100%;
}

http://jsfiddle.net/PNaSz/

这将确保 absolute 元素在宽度上与 body 相对(因为它的定位 relative)，float:left 将确保正文与内容一样宽。