Question

我知道position: fixed创建了一个相对于视口而不是offsetParent的元素但是我有一个问题，我有一个侧面元素需要x空间然后一些固定位置标题元素，我想占用剩余视口宽度的一定百分比。

现在我可以将所有h1元素放入他们自己的容器中，但随后它们将失去语义，因为它们不再与其内容相关联。

我理解JavaScript可以做到这一点，但我反对使用JavaScript进行页面结构。

有没有办法以纯HTML或CSS方式执行此操作？我不介意移动h1元素，只要它们保持与内容的关系并且内容保持静态定位。

Answer 1

您可以按照以下方式获得所需的效果。

您的HTML代码段很好：

<div id="content">
    <section>
        <h1>Heading 1</h1>
        <p>...</p>
    </section>
    <section>
        <h1>Heading 2</h1>
        <p>...</p>
    </section>
</div>

并且CSS很好但只需要一些解释：

#content {
    overflow: visible; /* default, but important to notice */
}

section {
    float: left;
    width: 25%;
}

h1 {
    position: fixed;
    width: 25%;
    background: #00FF00;
    text-align: center;
}

和演示小提琴：http://jsfiddle.net/audetwebdesign/4zLMq/

如何运作

您的#content块会占用200px左侧浮动侧边栏右侧的剩余宽度。

在#content中，您有两个左浮动的section元素占据父容器的25％，在这种情况下，它是视口端口面板的宽度。

您的孩子h1元素有position: fixed，这意味着他们的宽度25％也是根据视口的宽度计算的（不是#content）。

案例1
如果您希望h1和#content具有相同的宽度，则需要从相同的包含块（在这种情况下为视图端口）计算相同的相对值（25％）。

但是，在考虑浮动侧边栏后，25％的值不是剩余空间的25％。但是，也许你可以忍受这个。

案例2
如果将侧边栏宽度设置为相对值，则可以更容易确定宽度值。使用混合单位总是一个问题。

Answer 2

tldr; 更短更清洁的解决方案：

spark.executor.instances

我偶然发现了这个问题，问题类似：我的容器大小可以通过调整大小来定义：两者（也可以移动！）。

如果我遵循接受的解决方案，则暗示我必须将相同的道具应用于我的容器内的固定标头（顶部，左侧，宽度和高度......）。

相反，继承父容器的宽度可以正常工作。我发现这种方式更简单，在主流浏览器和手机（demo）上测试也更有意义。

将固定元素定位为相对于容器的百分比宽度

2 个答案:

如何运作