将CSS宽度分配给position:fixed元素

Question

将CSS宽度分配给position:fixed元素

5

我希望一个固定元素的宽度与紧接其下方的 div 相匹配。想象一下一个头部和一个主要内容 div。当头部和内容 div 嵌套在外部 div 中时，会出现宽度匹配的问题。在这种情况下，每个元素的百分比宽度不再匹配其父元素 (例如 <body> 标签) 的宽度，而固定元素的宽度取决于某些让我感到困惑的东西。

为了更好地解释我的意思，请对比以下两个 jsfiddles：

1. http://jsfiddle.net/2dudX/4/ vs. 2. http://jsfiddle.net/2dudX/10/ 以下是每个示例的代码：

<div id="fixed"></div>
<div id="content"></div>

#fixed{ position:fixed; z-index:2; width:90%;
        height:25px; background:yellow;}
#content{ width:90%; height:300px; background:red}

对比。

<div id="main">
   <div id="fixed"></div>
   <div id="content"></div>    
</div > 

#main{ width:95%}
#fixed{ position:fixed; z-index:2; width:90%;
        height:25px; background:yellow;}
#content{ width:90%; height:300px; background:red}

注意，只有在 jsfiddle #1 中，不管您如何调整浏览器大小，黄色和红色 div 的宽度都会匹配。不幸的是，jsfiddle #2 更像是真实世界的情况，我想知道如何更正 id="fixed" 的 div，使其宽度也与 id="content" 的 div 匹配。

您有什么想法吗？

- tim peterson

请注意，我刚刚看到有关匹配宽度的注释，请忽略此翻译请求。 - CoreyRS

3个回答

4

很简单。固定宽度元素从其父级中移除，并相对于窗口的宽度进行调整，因此在两种情况下，固定div始终与窗口大小相关，但当在具有非100％宽度的父容器中时，固定元素仍然相对于窗口宽度，而非固定位置的元素现在相对于父元素宽度。因此，非固定元素变为窗口的95％的90％，而固定元素仅保持窗口的90％不变。

编辑：

如果您希望匹配宽度，则可以使用jquery，如下所示：

$(function(){
    $('#fixed').width($('#content').outerWidth());
});

- CoreyRS

1

没有办法只使用 CSS 来完成这个任务，而不需要打开计算器吗？我讨厌使用 JS 进行样式操作。 - Adam Waite

0

在现代CSS中，可以使用以下方法计算#fixed的宽度：

#fixed {    
  width: calc(100vw * (0.95 * 0.9));  /* or just use 100vw * 0.855 */
}

你仍然需要知道另一个元素设置的宽度（即，如果匹配元素的宽度CSS值发生变化，它不会自动更新#fixed的宽度），但至少不需要拿出计算器了。

- authentictech

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dmitry Koroliov · Accepted Answer

你可以按照以下方式实现 FIDDLE （相对于 #main 设置 %）。固定元素的尺寸始终是相对于根元素进行计算的，因此你需要相应地重置 % 单位。在这种特殊情况下，你需要设置：

#fixed {
    width: 85.5%;
}

如果你的主要元素是95%，而静态元素相对于主要元素是90%，那么你需要根据根元素计算其宽度(1 * .95 * .9 = .855)。