将CSS宽度分配给位置:固定元素
我想要一个固定元素的宽度与它下面的div的宽度相匹配。想象一个标题和一个主要内容div。当头和内容div嵌套在外部div中时，就会出现匹配其宽度的问题。在这个场景中，每个元素的%宽度不再匹配它们的父级宽度(例如，<body>标记)，并且固定元素的宽度是基于一些让我感到困惑的东西。
为了更好地解释我的意思，对比一下这两个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匹配。
有什么想法？
回答 2
Stack Overflow用户
发布于 2012-08-25 02:54:19
您可以这样做：小提琴 (设置%相对于#main)固定元素的维度总是相对于根元素计算的，因此在需要设置的特殊情况下，需要重置%-unit：
#fixed {
width: 85.5%;
}在这种情况下，#main为95%，静态元素相对于主元素为90%。因此，您需要计算它对根元素的宽度(1 * .95 * .9 = .855)。
Stack Overflow用户
发布于 2012-08-25 02:57:52
放松点，我的朋友。固定宽度元素从父元素中拉出，现在相对于窗口的宽度，因此在这两种情况下，固定的div总是相对于窗口的大小，但是在宽度大于100%的父容器中，固定元素将保持相对于窗口宽度，但非固定位置元素现在相对于父元素的宽度。因此，非固定元素成为95%窗口的90%，而固定元素仅占窗口的90%。
编辑：
如果希望匹配宽度，可以像这样使用jquery：
$(function(){
$('#fixed').width($('#content').outerWidth());
});https://stackoverflow.com/questions/12118739
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号