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

Question

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

参见:http://jsfiddle.net/U5DSZ/

现在我可以把所有的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;更短更干净的解决方案:

h1 {
    width: inherit;
    ...

---

我偶然发现了这个问题，有一个类似的问题:我的容器的大小可以通过resize:both来定义(也可以移动!)

如果我遵循公认的解决方案，这意味着我必须在我的容器内的固定头应用相同的道具(top, left, width和height…)。

相反，从父容器继承宽度的可以正常工作。我发现这种方法更简单，也更有意义，在主要的浏览器和手机上测试(演示)。