Question

固定定位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>

Answer 1

在inherit选择器上使用width属性的#header值。

为什么会这样做

通过为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无关，color从父元素而不是视口获取其值。

请参阅：http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#propdef-width

例如，如果您将#wrapper属性添加到#header，则width会继承该属性。

区别在于auto的初始/默认值为color，而inherit的初始/默认值为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, 0, 0.5); };

注意：父元素和包含块之间存在细微差别。在大多数情况下，两者是相同的，但对于固定定位的元素，它们是不同的。

＆＃13;

<div id="wrapper">
  #wrapper
  <div id="header">
    #header
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

Answer 2

更改

#wrapper{
    position: relative;
    width:500px;
}

到

#wrapper{
    position: absolute;
    width:500px;
}

如何使固定的div继承父级的宽度？

2 个答案: