以相对于容器的百分比宽度定位固定元素 [英] Position fixed element with percentage width relative to container

问题描述

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

请参阅小提琴： http://jsfiddle.net/U5DSZ/

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

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

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

您的HTML代码段是好的：

p>

 < div id =content> 
< section> 
< h1>标题1< / h1> 
< p> ...< / p> 
< / section> 
< section> 
< h1>标题2< / h1> 
< p> ...< / p> 
< / section> 
< / div> 
  

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

  #content {
 overflow：visible; / *默认，但是注意很重要* / 
} 
 
节{
 float：left; 
 width：25％; 
} 
 
 h1 {
 position：fixed; 
 width：25％; 
 background：＃00FF00; 
 text-align：center; 
} 
  

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

工作原理

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

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

您的孩子 h1 元素有 position：fixed 这意味着它们的宽度25％也是基于视口的宽度计算的（不是 #content ）。

情况1

如果您想要 h1 和 #content 具有相同的宽度，它们需要具有从相同的包含块（在这种情况下为视口）计算的相同的相对值（25％）。

值25％不是您占用浮动侧边栏后的剩余空间的25％。

情况2

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

I know that position: fixed makes an element relative to the viewport instead of it's offsetParent however I have an issue where I have a side element which takes x amount of space and then some fixed position heading elements which I want to take up a percentage of the remaining viewport width.

See fiddle: http://jsfiddle.net/U5DSZ/

Now I could put all the h1 element's into their own container but then they lose their semantic meaning as they are no longer associated with their content.

I understand JavaScript could do this but I am against using JavaScript for page structure.

Is there a way to do this in a purely HTML or CSS way? I don't mind moving the h1 element's as long as they retain their relationship with the content and the content remains statically positioned.

解决方案

You can get the effect that you want as follows.

Your HTML snippet is good as is:

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

and the CSS is good but just requires some explanation:

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

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

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

and the demo fiddle: http://jsfiddle.net/audetwebdesign/4zLMq/

How This Works

Your #content block takes up the remaining width to the right of your 200px left floated sidebar.

Within #content, you have two left-floated section elements that take up 25% of the parent container, which in this case, is the width of the view port panel.

Your child h1 elements have position: fixed, which means that their width of 25% is also computed based on the width of the viewport (not #content).

Case 1
If you want h1 and #content to have the same width, they need to have the same relative (25%) computed from the same containing block (view port in this case).

However, the value of 25% is not 25% of the remaining space after you account for the floated sidebar. However, maybe you can live with this.

Case 2
You could make the width values a bit easier to determine if you set the sidebar width to be a relative value. Using mixed units is always an issue.

这篇关于以相对于容器的百分比宽度定位固定元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！