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

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
如果将侧边栏宽度设置为相对值,则可以更容易确定宽度值.使用混合单位总是一个问题.