本文探讨了在CSS布局中，如何使一个固定定位的元素（如标题）的宽度与紧邻的div（如主要内容区域）保持一致。通过分析两个JSFiddle示例，作者指出在不同情况下，固定元素的宽度可能会失去与父元素宽度的同步。问题在于当使用百分比宽度时，固定元素的宽度基于一个令人困惑的参照物。解决方案可能涉及更深入地理解CSS布局和定位原理，以确保在各种屏幕尺寸下两部分的宽度都能正确匹配。
我想要一个固定元素的宽度来匹配紧挨着它的div的宽度.想象一下标题和主要内容div.当标题和内容div嵌套在外部div中时,会出现匹配其宽度的问题.在这种情况下,每个的％宽度不再与其父级宽度匹配(例如,< body>标记),固定元素的宽度基于令我困惑的东西.
为了更好地解释我的意思,对比这两个js小提琴：
这是每个代码：
#fixed{ position:fixed; z-index:2; width:90%;
height:25px; background:yellow;}
#content{ width:90%; height:300px; background:red}
与
#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匹配.
思考？
1266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
