关于fixed元素的宽度问题

  <div class="wrap">
    <div class="header"></div>
    <div class="main"></div>
  </div>

header设置为position:fixed后,如何让其宽度等于父元素wrap的宽度?

有什么纯css实现方案没有?

=====================================================================
采纳的答案的解释:

clipboard.png

出处: transform对元素的影响

transform是把fixed降级成absolute处理了,所以宽度能自适应,
所以fixed元素宽度自适应还是只能用js来处理吗?

阅读 37.7k
9 个回答

父元素加上3d转换就可以了,比如:transform: scale3d(1, 1, 1);

刚试了一个,left和right设为0,然后宽度就跟原来一样了

新手上路,请多包涵

我试了下,用width: calc(100% - 224px);解决了。。。。

fixed是相对于html中window元素的,所以如果纯CSS你是不能实现和其父元素宽度相等的,给你两个解决方案:
1、fixed下设置width和其父元素值相等;
2、fixed换成absolute;

不考虑兼容性的话可以使用

position: sticky;

父元素设置fixed,然后header设置宽度100%

新手上路,请多包涵

同楼上,由于菜单弹出要挤压fixed的宽度,我得让它自适应
left右移200px
fixed可以用width:calc-200px就可以自适应了。。。。。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏