100％位置绝对元素的宽度

我正在尝试使div的父元素的宽度为100％（body）。 body有一个水平滚动条，div只占用视口宽度。为了解决这个问题，我添加了100％位置绝对元素的宽度

width: inherit;

它。我预计它自inherit开始工作，根据definition，意思是“从其父元素中获取属性的计算值”。我测试它在一个更简单的模型，它的工作原理：http://jsfiddle.net/DerekL/EYgT9/。

但是，当我将代码应用于我的实际项目时，它不能按预期工作。它似乎甚至没有遵循定义。

enter image description here
正如你所看到的，div有inherit为width。但它的计算宽度不是其父宽度body，而是其他值302px。

现在让我们来看看body：
enter image description here
body显然有470px的宽度。

我不明白这背后的原因是什么，使其无法按预期工作。整体结构与小提琴相同，但结果不尽相同。

发生这种情况的可能原因是什么？对不起，我无法发布代码的相关部分，因为我甚至没有发现这个问题。

这是因为带有position:absolute的元素的位置参照<html>，因为<body>没有提及它的位置。因此，它也从html继承它的宽度。

为了解决这个问题，添加position:relative到body

2014-06-20 23:08:09

我尝试添加“相对”，但遗憾的是它仍然无法正常工作。（如果相对于'html'和'html'的'div'取整个文档的宽度，是不是具有相同的效果？） –

你的身体标记有位静止和绝对正常工作的父元素必须有位置上的相对或绝对设置的位置。只需添加位置：相对或绝对;到身体标签。

2014-06-20 23:12:44 Gruja

回答