我如何做一个固定的定位div继承父的宽度？ [英] How can I make a fixed positioned div inherit width of parent?

问题描述

有固定位置的div可以继承父类的宽度吗？

我知道固定宽度是相对于窗口的，所以这段代码不工作：

  #wrapper {position：relative; width：500px; height：20px; background-color：blue;}＃header {position：fixed;宽度：100％; height：20px; background-color：rgba（255,0,0,0.5）;}  

 < div id =wrapper> #wrapper< div id =header> #header< / div> < / div> 
 
解决方案
 code> #header 选择器上的 width 属性的code> inherit  
 
 
 
通过指定位置：
固定到 #header 元素， #header 元素的位置是根据在CSS2规范中指定的视口为
：
 
 
 
  http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#positioning-scheme  
 
 
 
但是， position：fixed 不会更改DOM结构，这意味着
  #wrapper 元素仍然是 #header 元素的父代。作为
结果， #header 仍然可以从其父元素继承属性值，即使它的位置是相对于视口确定的。
 
 
 
请注意，如果您为宽度指定一个百分比值，fixed元素将根据视口计算值，如规范中所述。但是，这不适用于 width：inherit ，它从父元素而不是视口获取值。
 
 
 
请参阅： http://www.w3.org/TR/ 2011 / REC-CSS2-20110607 / visudet.html＃propdef-width  
 
 
 
例如，如果添加了 color 属性到 #wrapper ，它将被 #header 继承。 
 
 
 
区别是 width 的初始值/默认值为 auto ，而 color 则为 inherit 。要获取父类的属性，您需要指定 width：inherit ，而不是 width：100％; 
 
 
 
 注意：父元素和包含块之间有细微的区别。在大多数情况下，两者是相同的，但对于固定位置的元素，它们是不同的。
 
 
 
 
 
 
  #wrapper {position：relative; width：500px; height：20px; background-color：blue;颜色：白色; / * 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>  
 
 
 
 
Is there a way a fixed positioned div can inherit the width of a parent?

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.

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: 

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.  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.

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.

See: 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. 

The distinction is that the initial/default value for width is auto whereas for color it is inherit.  To get the parent's with property, you need to specify width: inherit, not 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>





                        
这篇关于我如何做一个固定的定位div继承父的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！