Фиксированное положение ширины жидкости

Представьте себе:

<div class="outer">
    <div class="inner">
    </div>
</div>

Где:

.outer является частью структуры столбцов, а его ширина является процентильной и, следовательно, жидкостью.
.inner представляет элемент позиции fixed, который должен заполнить 100% ширину элемента .outer. Однако его положение по вертикали остается неизменным, поэтому fixed.

Ive попытался реализовать этот макет со следующим CSS:

.outer {
    position: relative;
    width: %;
}
.inner {
    position: fixed;
    width: 100%;
}

Однако .inner не вычисляет свою ширину в процентах от своего родителя relative. Вместо этого он заполняет всю ширину окна/документа. Попытка любых свойств left или right приводит к тем же свойствам игнорирования родителя.

Есть ли способ обойти это?

Ответы

Ответ 1

.outer {
    position: relative;
    width: %;
}
.inner {
    position: fixed;
    width: inherit;
}

Это должно сделать трюк.

Ответ 2

position: fixed всегда относится к окну/браузеру, поэтому его нельзя использовать для решения вашей проблемы. Фиксированное позиционирование удаляет элемент из естественного порядка DOM и, следовательно, больше не остается в вашем внешнем div, поэтому он берет полную ширину браузера, а не вашего контейнера. Вам нужно position: absolute разместить .inner относительно .outer. Вы сможете расположить свой элемент так же, как и его ширина, в div .outer.

Ответ 3

Используйте это:

.inner { позиция: фиксированная; Слева направо: 0; право: 0;

}

Ответ 4

Фиксированные элементы принимают только абсолютные значения как ширину. Если ваш родительский контейнер является текучим (ширина в процентах), вам необходимо установить ширину фиксированного элемента динамически. Вам нужно получить ширину контейнера для упаковки и установить его на липкий элемент.

CSS

.outer {width: 25%;}
.inner {position: fixed;}

var fixedWidth = $('.outer').css('width');
$('.inner').css('width', fixedWidth);

Кроме того, вы можете добавить прослушиватель событий в случае изменения размера окна.

window.addEventListener('resize', resize);
function resize() {
    var fixedWidth = $('.outer').css('width');
    $('.inner').css('width', fixedWidth);
}

Ответ 5

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

Ответ 6

position:fixed всегда относится к окну просмотра/браузера, а не к предкам.

Ответ 7

Как насчет того, чтобы использовать что-то вроде этого fiddle?

.outer {
    width: 20%;
    height: 1200px;
    margin-left: 5%;
    float: left;
}
.inner {
    height: 200px;
    position: fixed;
    top: 0;
    background: orange;
    right: 75%;
    left: 5%;
}