流体宽度固定位置 [英] Fluid width fixed position

问题描述

想象：

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

其中：

• .outer 是列结构的一部分，其宽度是百分位数，因此流畅。


• .inner 表示固定位置元素，应填充100％宽度的 .outer 元素。但是它的垂直位置保持不变，因此固定。

• .outer is part of a column structure, and its width is a percentile and therefore fluid.
• .inner represents a fixed position element that should fill with a 100% width the .outer element. However its position vertically remains the same, therefore fixed.

尝试使用以下CSS实现此布局：

I’ve tried to implement this layout with the following CSS:

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

但是， .inner 不会将其宽度计算为其相对父级的百分比。相反，它会填充窗口/文档的全部宽度。尝试任何左或右属性导致相同的父级忽略的质量。

However, .inner does not calculate its width as a percentage of its relative parent. Instead it fills the full width of the window/document. Attempting any left or right properties result in the same parent-ignoring qualities.

有什么办法吗？

推荐答案

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

这应该可以做。

这篇关于流体宽度固定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！