流体宽度固定位置(Fluid width fixed position)

想像：

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

哪里：

.outer是列结构的一部分，并且其宽度是一个百分位，因此流体。
.inner表示fixed应与100％的宽度的填补位置元件.outer元件。然而，其位置垂直地保持不变，因此fixed 。

我试图实现这种布局与下面的CSS：

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

然而， .inner不计算其宽度为百分比relative父。相反，它使窗口/文件的全宽。尝试任何left或right性质导致相同的父-忽略品质。

有没有办法解决？

Answer 1:

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

这应该够了吧。

Answer 2:

position: fixed总是相对于窗口/浏览器，从而它不能被用来解决问题。固定定位将删除DOM的自然秩序的要素，因此不会留你的外层div内了，因此为什么它需要在浏览器的整个宽度，而不是你的容器。你需要使用什么是position: absolute放置.inner相对于.outer 。您可以在您的元素位置，以及有它的宽度由包含.outer格。

Answer 3:

用这个：

.inner {位置是：固定; 左：0; 右：0;

}

Answer 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);
}

Answer 5:

你可以看看这个的jsfiddle ，我提出，说明你的问题的解决，您可以使用此代码完全一样你想要做什么。

Answer 6:

position:fixed总是相对于视口/浏览器窗口，而不是祖先。

Answer 7:

怎么样使用这样的小提琴？

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

文章来源: Fluid width fixed position