Установите ширину фиксированного позиционного div относительно его родителя, имеющего максимальную ширину

Есть ли какое-либо решение без JS?

HTML

<div class="wrapper">
   <div class="fix"></div>
</div>

CSS

.wrapper {
max-width: 500px;
border: 1px solid red;
height: 5500px;
position: relative;
}


.fix {
width: inherit;
height: 20px;
position:fixed;
background: black;
}

Я не могу добавить другие стили для .wrapper кроме width: 100%;. Я пытаюсь использовать width: inherit, но это не работает для меня из-за того, что у меня есть родительский div с максимальной шириной. источник

Вот JsFiddle Demo

Ответы

Ответ 1

Элемент

A position:fixed больше не относится к его родительскому элементу. Он уважает только наблюдатели.

Определение MDN:

исправлено
Не оставляйте пространство для элемента. Вместо этого расположите его в указанной позиции относительно экрана просмотра экрана и не перемещайте его при прокрутке.

Таким образом, любой width, max-width или любое другое свойство не будет соблюдаться фиксированным элементом.

ИЗМЕНИТЬ

На самом деле он не наследует width, потому что в обертке не определено свойство width. Итак, попробуйте установить дочерний элемент как width: 100% и наследуйте max-width:

http://jsfiddle.net/mx6anLuu/2/

.wrapper {
    max-width: 500px;
    border: 1px solid red;
    height: 5500px;
    position: relative;
}


.fix {
    max-width: inherit;
    width: 100%;
    height: 20px;
    position:fixed;
    background: black;
}

Ответ 2

в столбце уже есть ширина, просто установите ширину фиксированного элемента для наследования. нет причин усложнять вещи.

CSS

.col-sm-3 { width: 25%; }
.fixed-in-col { width: inherit; ... }

HTML:

<div class="col-sm-3">
    <div class="fixed-in-div">
        ...
    </div>
</div>

Ответ 3

Кажется, нет решения без JS. Это сообщение блога Фелипе Тадео объясняет, почему:

https://dev.to/phillt/inherit-the-width-of-the-parent-element-when-position-fixed-is-applied

Это объясняет путаницу вокруг width: inherit

"Фиксированные позиции сами по себе относительно окна просмотра... всякий раз, когда вы наследуете ширину (с фиксированной позицией), она будет относиться к области просмотра"