css设置元素继承父元素宽度_html – 如何使固定的div继承父级的宽度？

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

为何如此有效

通过指定position：fixed到#header元素,#header元素的位置是根据指定的视口计算的

在CSS2规范中：

但是,position：fixed不会改变DOM结构,这意味着

#wrapper元素仍然是#header元素的父元素.作为一个

结果,#header仍然可以从其父元素继承属性值,即使它的位置是相对于视口确定的.

另请注意,如果为宽度指定百分比值,则固定元素将根据视口计算值,如规范中所述.但是,这与width：inherit无关,它从父元素而不是视口获取其值.

例如,如果您将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);

}

#wrapper

#header