Question

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

width: inherit;

到它。我期望它能够工作，因为inherit，根据definition，意思是“从其父元素中获取属性的计算值”。我在一个更简单的模型中对它进行了测试，它可以工作：http://jsfiddle.net/DerekL/EYgT9/。

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

enter image description here
如您所见，div的{{1}}为inherit。但它的计算宽度不是其父width的宽度，而是其他值body。

现在让我们来看看302px：
enter image description here
body的宽度明显为body。

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

发生这种情况的可能原因是什么？很抱歉，我无法发布代码的相关部分，因为我甚至没有发布导致此问题的地方。

Answer 1

这是因为带有position:absolute的元素位于<html>的引用中，因为<body>没有位置可以引用它。因此，它也从html继承了它的宽度。

要解决此问题，请将position:relative添加到body

Answer 2

您的body标签的位置是静态的，对于绝对的位置，父元素必须在relative或absolute上设置位置。只需添加位置：相对或绝对;身体标签。