[英]How can I make a fixed positioned div inherit width of parent?
Is there a way a fixed positioned div can inherit the width of a parent? 有没有办法固定定位div可以继承父级的宽度?
I know fixed width is relative to the window's so this code doesn't work: 我知道固定宽度是相对于窗口的,所以这段代码不起作用:
#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>
Use the inherit
value for the width
property on the #header
selector. 在
#header
选择器上使用width
属性的inherit
值。
Why This Works 为何如此有效
By specifying position: fixed
to the #header
element, the #header
element's position is calculated with respect to the viewport as specified in the CSS2 specification: 通过指定
position: fixed
到#header
元素,# #header
元素的位置是根据CSS2规范中指定的视口计算的:
http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#positioning-scheme http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#positioning-scheme
However, position: fixed
does not change the DOM structure, which means that the #wrapper
element is still the parent of the #header
element. 但是,
position: fixed
不会更改DOM结构,这意味着#wrapper
元素仍然是#header
元素的父元素。 As a consequence, the #header
can still inherit property values from its parent element, even though its position is determined with respect to the viewport. 因此,#
#header
仍然可以从其父元素继承属性值,即使它的位置是相对于视口确定的。
Note also that if you specify a percentage value for the width, the fixed element will calculate the value based on the viewport, as stated in the specification. 另请注意,如果为宽度指定百分比值,则固定元素将根据视口计算值,如规范中所述。 However, this does not pertain to
width: inherit
, which takes its value from the parent element, not the viewport. 但是,这与
width: inherit
无关,它从父元素而不是视口获取其值。
See: http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#propdef-width 请参阅: http : //www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#propdef-width
For example, if you added the color
property to #wrapper
, it would be inherited by #header
. 例如,如果您将
color
属性添加到#wrapper
,它将由#header
继承。
The distinction is that the initial/default value for width
is auto
whereas for color
it is inherit
. 区别在于
width
的初始/默认值是auto
而对于color
它是inherit
。 To get the parent's with property, you need to specify width: inherit
, not width: 100%
; 要获取带有属性的父级,需要指定
width: inherit
,而不是width: 100%
;
Note: There is a subtle distinction between the parent element and the containing block. 注意:父元素和包含块之间存在细微差别。 In most cases, the two are the same, but for fixed positioned elements, they are different.
在大多数情况下,两者是相同的,但对于固定定位元素,它们是不同的。
#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>
Change 更改
#wrapper{
position: relative;
width:500px;
}
to 至
#wrapper{
position: absolute;
width:500px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.