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

我想要一个固定元素的宽度与紧靠其下方的div的宽度相匹配。设想一下标题和主要内容div。在标题和内容div嵌套在外部div内时，会出现匹配宽度的问题。在这种情况下，每个元素的宽度不再与其父元素宽度匹配（例如，<body>标记），而固定元素的宽度基于某些令我困惑的东西。将CSS宽度分配给某个位置：固定元素

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

这里的每个代码：

<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匹配。

想法？

来源

2012-08-25 tim peterson

检查下面编辑，才刚刚看到了备注匹配的宽度。 – CoreyRS

你可以给它这样FIDDLE（相对于#main％设定）固定元件的尺寸总是相对于根元素计算，所以你需要在你需要这种特殊情况下重置%相应-unit 设置：

#fixed { 
    width: 85.5%; 
}

，区分#main是95％，你的静态元素是相对于主90％。所以，你需要计算向根元素（1 * .95 * .9 = .855）

来源

2012-08-25 02:54:19 user907860

- @ caligula，谢谢你所说的是两倍宽度（.95 * .90 = .85.5）的倍数？ –

而且您需要确保正确设置了对象。我只是有一个图像设置为对象适合：封面;大小被搞乱了。设置对象适合度：包含;修复。 – Ralf

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

编辑：

如果要匹配你可以使用jQuery这样的宽度：

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

来源

2012-08-25 02:57:52 CoreyRS

没有办法做到这一点只使用CSS而不必让计算器出来？我讨厌做JS风格的操作。 –

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

回答

相关问题