Html 以相对于容器的百分比宽度定位固定元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16900367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position fixed element with percentage width relative to container
提问by George Reith
I know that position: fixedmakes an element relative to the viewport instead of it's offsetParenthowever I have an issue where I have a side element which takes xamount of space and then some fixed position heading elements which I want to take up a percentage of the remaining viewport width.
我知道这position: fixed会使元素相对于视口而不是它，offsetParent但是我有一个问题，我有一个占用x空间的侧元素，然后是一些固定位置的标题元素，我想占据剩余视口宽度的百分比。
See fiddle: http://jsfiddle.net/U5DSZ/
见小提琴：http: //jsfiddle.net/U5DSZ/
Now I could put all the h1element's into their own container but then they lose their semantic meaning as they are no longer associated with their content.
现在我可以将所有h1元素放入它们自己的容器中，但是它们失去了语义，因为它们不再与它们的内容相关联。
I understand JavaScript could do this but I am against using JavaScript for page structure.
我知道 JavaScript 可以做到这一点，但我反对将 JavaScript 用于页面结构。
Is there a way to do this in a purely HTML or CSS way? I don't mind moving the h1element's as long as they retain their relationship with the content and the content remains statically positioned.
有没有办法以纯 HTML 或 CSS 的方式做到这一点？我不介意移动h1元素，只要它们保持与内容的关系并且内容保持静态定位。
采纳答案by Marc Audet
You can get the effect that you want as follows.
你可以得到你想要的效果如下。
Your HTML snippet is good as is:
您的 HTML 代码段很好：
<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:
CSS 很好，但只需要一些解释：
#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/
和演示小提琴：http: //jsfiddle.net/audetwebdesign/4zLMq/
How This Works
这是如何工作的
Your #contentblock takes up the remaining width to the right of your 200px left floated sidebar.
您的#content块占据了 200 像素左侧浮动侧边栏右侧的剩余宽度。
Within #content, you have two left-floated sectionelements that take up 25% of the parent container, which in this case, is the width of the view port panel.
在 中#content，您有两个左浮动section元素，它们占据父容器的 25%，在本例中，它是视口面板的宽度。
Your child h1elements have position: fixed, which means that their width of 25% is also computed based on the width of the viewport (not #content).
您的子h1元素有position: fixed，这意味着它们 25% 的宽度也是根据视口的宽度计算的（不是#content）。
Case 1
If you want h1and #contentto have the same width, they need to have the same relative (25%) computed from the same containing block (view port in this case).
情况 1
如果您希望h1和#content具有相同的宽度，则它们需要从相同的包含块（在这种情况下为视口）计算出相同的相对 (25%)。
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.
但是，25% 的值并不是考虑浮动侧边栏后剩余空间的 25%。但是，也许你可以忍受这个。
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.
情况 2
如果将侧边栏宽度设置为相对值，您可以使宽度值更容易确定。使用混合单位始终是一个问题。
回答by Bigood
tldr;Shorter and cleaner solution:
tldr; 更短更干净的解决方案：
h1 {
width: inherit;
...
I stumbled upon this question, with a similar issue : my container's size can be user defined through resize:both (and moveable too!).
我偶然发现了这个问题，有一个类似的问题：我的容器的大小可以由用户通过 resize:both 定义（也可以移动！）。
If I followed the accepted solution, it implied I had to apply the same props to my fixed header inside my container (top, left, width and height…).
如果我遵循了公认的解决方案，则意味着我必须将相同的道具应用到容器内的固定标题（顶部、左侧、宽度和高度……）。
Instead, inheriting the width from the parent containerworks properly. I found this way much simpler, and it makes more sense too, tested on major browsers and mobiles (demo).
相反，从父容器继承宽度可以正常工作。我发现这种方式更简单，也更有意义，在主要浏览器和手机上进行了测试（演示）。
