Почему полоса прокрутки влияет на ширину фиксированных / абсолютных элементов, а не статических / относительных

Question

Мы заметили странное поведение всех браузеров под OSX'при использовании полосы прокрутки "показать автоматически"-feature против "всегда видно" (см. Настройки OSX-> общие).

Если он переключен на "всегда", фиксированные / абсолютные элементы со 100% имеют ширину на 15 пикселей меньше, чем при переключении на "автоматически".

Я могу понять, что полоса прокрутки "всегда" использует фиксированное пространство, а "автоматическая" полоса прокрутки накладывается на контент.

Но почему на земле это имеет значение для

position:fixed/absolute

элементы, но не

position:static/relative?

Я сделал скрипку, чтобы продемонстрировать проблему, однако вам придется изменить настройки системы, чтобы заметить это: https://jsfiddle.net/n4jtpwvw/

Желаемый конечный результат: синий (#navigation) и красный (#main) DIV должны идеально совмещаться, независимо от настроек клиента на полосе прокрутки.

Answer 1

Элементы с фиксированным / абсолютным положением обычно вынимаются из обычного потока документов. Здесь есть хороший ответ о том, что происходит за кулисами.

Что касается вашего кода, взгляните на этот обновленный jsfiddle, он работает у меня при включении и выключении этой опции OSX

https://jsfiddle.net/n4jtpwvw/1/

.w1 {
  ...
  max-width: 300px;
  margin: 0 auto;
}

#navigationWrapper {
  ...
  max-width: inherit;
}

Я установил максимальную ширину на.w1 и автоматические поля. Затем я извлек свойства left и right из #navigationWrapper и позволил ему наследовать максимальную ширину из.w1