固定div上的宽度继承无效

问题描述：

首先，这是我所拥有的一个例子. https://jsfiddle.net/1xyofup5/

First, here is an example of what I have. https://jsfiddle.net/1xyofup5/

HTML代码:

<div>
  <div class="container">
    <div>
      <div>
        Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content 
      </div>
      <div class="fixed">
        Other content
      </div>
    </div>
  </div>
</div>

CSS代码:

.container {
  width: 350px;
  height: 100%;
  position: absolute;
}

.container > div {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 50px);
    border: 1px solid red;
}

.container > div > .fixed {
    padding: 10px;
    position: fixed;
    bottom: 0;
    background-color: white;
    border: 1px solid green;
    width: inherit;
}

我无法更改html结构，只能编辑.container > div和.container > div > .fixed规则.

I can't change the html structure and I can only edit .container > div and .container > div > .fixed rules.

如何使固定div适合其父母的宽度? inherit不起作用.

How can I make the fixed div fit the width of his parent ? The inherit doesn't work.

谢谢！

答

w3schools. com 上的inherit属性:

Inherit关键字指定属性应从其父元素继承其值.

The inherit keyword specifies that a property should inherit its value from its parent element.

和 MDN :

继承CSS值使指定了该元素的元素从其父元素中获取属性的计算值.每个CSS属性都允许使用它.

The inherit CSS-value causes the element for which it is specified to take the computed value of the property from its parent element. It is allowed on every CSS property.

对于继承的属性，这将增强默认行为，并且仅在覆盖另一个规则时才需要.对于非继承属性，这指定的行为通常意义不大，您可以考虑使用initial来代替，或者在all属性上未设置.

For inherited properties, this reinforces the default behavior, and is only needed to override another rule. For non-inherited properties, this specifies a behavior that typically makes relatively little sense and you may consider using initial instead, or unset on the all property.

即使父元素不是包含块，继承也总是来自文档树中的父元素.

Inheritance is always from the parent element in the document tree, even when the parent element is not the containing block.

在您的情况下，fixed的继承值不是您想要的，因为其直接父级(.container > div)没有设置aa width，因此它将获得默认值auto

In your case, the inherited value to fixed is not what you want because its' direct parent (.container > div) doesn't have a a width set, and so it gets the default value of auto.

我看到两个简单的解决方案:

I see two simple solutions:

继承所有子级的宽度.因此添加:

Inherit the width throughout all children. So add this:

.container > div {
  width: inherit;
}

这样，container的宽度将继承到fixed元素的两倍.

That way, the width of container will be inherited twice down to the fixed element.

选项1演示

赋予.container > div自己的宽度:

.container > div {
  width: 300px;
}

选项2演示

固定div上的宽度继承无效

相关推荐