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

回答