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

Question

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

见小提琴：http://jsfiddle.net/U5DSZ/

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

我了解 JavaScript 可以做到这一点，但我反对将 JavaScript 用于页面结构。

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

Answer 1

你可以得到你想要的效果如下。

你的 HTML sn-p 是好的：

<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 块占据了 200 像素左侧浮动边栏右侧的剩余宽度。

在#content 中，您有两个左浮动section 元素，它们占据了父容器的25%，在本例中为视口面板的宽度。

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

案例 1
如果您希望h1 和#content 具有相同的宽度，则它们需要具有从相同的包含块（在本例中为视口）计算出的相同相对值（25%）。

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

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

Answer 2

tldr; 更简洁更简洁的解决方案：

h1 {
    width: inherit;
    ...

---

我偶然发现了这个问题，有一个类似的问题：我的容器的大小可以通过 resize:both 由用户定义（也可以移动！）。

如果我遵循公认的解决方案，这意味着我必须将相同的道具应用于容器内的固定标题（顶部、左侧、宽度和高度……）。

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