Question

我想要一个固定元素的宽度来匹配紧靠它下面的div的宽度。想象一下标题和主要内容div。当标题和内容div嵌套在外部div中时，会出现匹配其宽度的问题。在这种情况下，每个宽度的％宽度不再与其父级宽度匹配（例如，<body>标记），固定元素的宽度基于令我困惑的东西。

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

http://jsfiddle.net/2dudX/4/
vs。
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}

vs。

<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中注意，无论您如何调整浏览器大小，黄色和红色divs的宽度都会匹配。不幸的是，jsfiddle＃2更像是一个现实世界的场景，我想知道如何纠正id="fixed" div，使其宽度也与id="content" div匹配。

思想？

Answer 1

你可以这样FIDDLE（相对于#main设置％）固定元素的尺寸始终相对于根元素计算，因此您需要相应地重置% - 单位在这种特殊情况下，您需要设置：

#fixed {
    width: 85.5%;
}

案例#main为95％，您的静态元素相对于main为90％。所以你需要计算它朝向根元素的宽度（1 * .95 * .9 = .855）

Answer 2

我的朋友很容易。固定宽度元素从它们的父项中拉出来，现在相对于窗口的宽度是相对的，因此在两种情况下，固定div总是相对于窗口的大小，但是当在父容器中宽度不是100％时固定element将保持相对于窗口宽度，但非固定位置元素现在相对于父宽度。因此，非固定元素占窗口95％的90％，而固定元素仅占窗口的90％。

编辑：

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

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

将CSS宽度分配给位置：固定元素

2 个答案: