固定位置的 div 是否可以继承父级的宽度?
我知道固定宽度是相对于窗口的,所以这段代码不起作用:
#wrapper{
position: relative;
width:500px;
height: 20px;
background-color: blue;
}
#header{
position: fixed;
width: 100%;
height: 20px;
background-color: rgba(255,0,0,0.5);
}
<div id="wrapper">
#wrapper
<div id="header">
#header
</div>
</div>
最佳答案
对 #header
选择器的 width
属性使用 inherit
值。
为何如此有效
通过指定 position: fixed
到 #header
元素,#header
元素的位置是根据指定的视口(viewport)计算的
在 CSS2 规范中:
http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#positioning-scheme
但是,position: fixed
并没有改变 DOM 结构,这意味着
#wrapper
元素仍然是 #header
元素的父元素。作为一个
因此,#header
仍然可以从其父元素继承属性值,即使它的位置是根据视口(viewport)确定的。
另请注意,如果您指定宽度的百分比值,则固定元素将根据视口(viewport)计算该值,如规范中所述。但是,这不适用于 width: inherit
,它的值来自父元素,而不是视口(viewport)。
参见:http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#propdef-width
例如,如果您将color
属性添加到#wrapper
,它将被#header
继承。
区别在于 width
的初始/默认值是 auto
而 color
是 inherit
.要获取父级的with属性,需要指定width: inherit
,而不是width: 100%
;
注意:父元素和包含 block 之间有细微的区别。在大多数情况下,两者是相同的,但对于固定定位的元素,它们是不同的。
#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, 0, 0.5);
}
<div id="wrapper">
#wrapper
<div id="header">
#header
</div>
</div>
关于html - 如何使固定定位的 div 继承父级的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27982966/