4

我想要一个固定元素的宽度，以匹配紧挨其下方放置的 div 的宽度。想象一个标题和一个主要内容 div。当标题和内容 div 嵌套在外部 div 内时，会出现匹配宽度的问题。在这种情况下，每个元素的 % 宽度不再匹配它们的父宽度（例如，<body>标签），并且固定元素的宽度基于一些让我感到困惑的东西。

为了更好地解释我的意思，对比这两个 js fiddles：

  1. http://jsfiddle.net/2dudX/4/
    对比
  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 匹配。

想法？

4

2 回答 2

5

您可以通过这种方式FIDDLE（设置相对于#main 的百分比）固定元素的尺寸始终是相对于根元素计算的，因此在需要设置%的这种特殊情况下，您需要相应地重置 -unit：

#fixed {
    width: 85.5%;
}

情况#main是 95%，你的静态元素相对于主元素是 90%。所以你需要计算它朝向根元素的宽度（1* .95* .9= .855）

于 2012-08-25T02:54:19.217 回答
4

轻松一个我的朋友。固定宽度的元素从它们的父元素中拉出，现在与窗口的宽度是相对的，所以在这两种情况下，固定的 div 总是相对于窗口的大小，但是当在宽度不是 100% 的父容器中时，固定的元素将保持相对于窗口宽度，但非固定位置元素现在相对于父宽度。因此，非固定元素成为 95% 窗口的 90%，而固定元素仅保持恒定的 90% 窗口。

编辑：

如果你想匹配宽度，你可以像这样使用 jquery：

$(function(){
    $('#fixed').width($('#content').outerWidth());
});
于 2012-08-25T02:57:52.933 回答