有没有办法固定定位div可以继承父级的宽度?
我知道固定宽度是相对于窗口的,所以这段代码不起作用:
#wrapper{ position: relative; width:500px; height: 20px; background-color: blue; } #header{ position: fixed; width: 100%; height: 20px; background-color: rgba(255,0.5); }
<div id="wrapper"> #wrapper <div id="header"> #header </div> </div>
解决方法
在#header选择器上使用width属性的inherit值.
为何如此有效
通过指定position:fixed到#header元素,#header元素的位置是根据指定的视口计算的
在CSS2规范中:
http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#positioning-scheme
但是,position:fixed不会改变DOM结构,这意味着
#wrapper元素仍然是#header元素的父元素.作为一个
结果,#header仍然可以从其父元素继承属性值,即使它的位置是相对于视口确定的.
另请注意,如果为宽度指定百分比值,则固定元素将根据视口计算值,如规范中所述.但是,这与width:inherit无关,它从父元素而不是视口获取其值.
见:http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#propdef-width
例如,如果您将color属性添加到#wrapper,它将由#header继承.
区别在于宽度的初始/默认值是自动,而对于颜色,它是继承.要获取带有属性的父级,需要指定width:inherit,而不是width:100%;
注意:父元素和包含块之间存在细微差别.在大多数情况下,两者是相同的,但对于固定定位元素,它们是不同的.
#wrapper { position: relative; width: 500px; height: 20px; background-color: blue; color: white; /* for demo */ } #header { position: fixed; width: inherit; height: 20px; background-color: rgba(255,0.5); }
<div id="wrapper"> #wrapper <div id="header"> #header </div> </div>
原文地址:https://www.jb51.cc/html/231337.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。