流体宽度固定位置

Question

想像:

<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

您可以看一下我制作的这个jsfiddle ，它说明了您的问题的修复方法，您可以完全按照您想要的方式使用此代码。