Как исправить эту распространенную проблему положения: фиксированные элементы не расширяются до родительской ширины?

Question

Посмотрите на эту скрипку: http://jsfiddle.net/h4VS7/

Как сделать так, чтобы желтый элемент выровнялся (horz) с серым фоном, независимо от того, как изменилось окно? Я отказываюсь верить, что это не может быть сделано с помощью CSS. Да, плагин js hacks и Scroll Follow работает, но лагает.

Пожалуйста, кто-нибудь?

Edit:

Нашел решение. Если поля контейнера выражены в процентах, часть содержимого может быть выражена как остаток в процентах. Смотрите здесь: http://jsfiddle.net/h4VS7/1/

Хотя не уверен, почему он не выравнивается идеально. Это я должен думать. Может быть связано с полем jsfiddle / padding.

Answer 1

Это не особенно сложно, если вы не возражаете добавить дополнительный элемент для переноса .top:

http://jsfiddle.net/Ud3ZQ/

---

А также, правильное выравнивание (ну,почти) версия вашего решения:

http://jsfiddle.net/h4VS7/3/

Проблема заключалась в том, что jsFiddle загружает http://fiddle.jshell.net/css/result-light.css:

body {background: white; padding: 10px;  }

Что-нибудь более конкретное, чем * (включаяbody), поэтому padding применялся независимо от * {padding:0; margin:0}