Question

首先，这是我所拥有的一个例子。 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规则。

如何使固定div适合父母的宽度？ inherit不起作用。

谢谢！

Answer 1

inherit媒体资源上的

w3schools.com ：

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

和 MDN ：

继承CSS值使得指定它的元素从其父元素中获取属性的计算值。它允许在每个CSS属性上使用。

对于继承的属性，这会强化默认行为，并且只需要覆盖另一个规则。对于非继承属性，这指定了一种通常没有意义的行为，您可以考虑在all属性上使用initial或unset。

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

在您的情况下，fixed的继承值不是您想要的，因为它的＆＃39;直接父级（.container > div）没有设置width，因此它的默认值为auto。

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

选项1

继承所有孩子的宽度。所以加上这个：

.container > div {
  width: inherit;
}

这样，container的宽度将继承两次，直到fixed元素。

Option 1 demo

选项2

给.container > div＆＃39;自己的宽度：

.container > div {
  width: 300px;
}

Option 2 demo

Answer 2

您可以修复它在父级中定义宽度，所以：

＆＃13;

.container {
  height: 100%;
  position: absolute;
}

.container > div {
    width: 340px;
    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;
    box-sizing:border-box;
}

＆＃13;

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

＆＃13;

看到你的小提琴编辑：

https://jsfiddle.net/1xyofup5/1/

我已定义.container > div，其宽度将由.fixed继承。请参阅box-sizing属性以使用填充进行引导。

Answer 3

有很多方法可以解决这个问题。

简单的解决方法是将 width:inherit 添加到父div：

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

您的代码段有什么问题，inherit值取父级的值。在您的代码段的父级中，您没有定义宽度，因此它是CSS默认值width:auto

您还可以将父div中的宽度指定为：

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

您也可以指定.fixed的宽度，但我确定这不是您想要做的事情

Answer 4

inherit不能像你说的那样工作，所以只需明确设置它：

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

根据您的填充调整宽度。我添加了负余量纯粹是为了排列红色和绿色边界。

Answer 5

导致固定版本的所有div应该有width: inherit。

固定div上的宽度继承不起作用

5 个答案:

选项1

选项2