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

【问题标题】：Width inherit on fixed div doesn't work固定 div 上的宽度继承不起作用
【发布时间】：2016-02-08 22:40:48
【问题描述】：

首先，这是我所拥有的一个示例。 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 不起作用。

谢谢！

【问题讨论】：

寻求代码帮助的问题必须在问题本身中包含重现它所需的最短代码。尽管您提供了一个示例链接，但如果该链接失效，您的问题对于未来遇到相同问题的其他 SO 用户将毫无价值。
你没有设置宽度
@DaMaxContent 宽度在.container 中设置。
@Chris 完成。想到有人会那么自私，真是令人沮丧。他们都是好帖子。
@DaMaxContent 你的回答被我投票赞成，用你的评论I think somebody is spam downvoting our solutions. I tried to upvote the others as they are not bad. I can't upvote mine来公正。

标签： html css css-selectors

【解决方案1】：

w3schools.com 在inherit 属性上：

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

和MDN：

inherit CSS-value 导致指定它的元素从其父元素获取属性的计算值。每个 CSS 属性都允许使用它。

对于继承的属性，这加强了默认行为，并且只需要覆盖另一个规则。对于非继承的属性，这指定了一个通常意义不大的行为，您可以考虑使用 initial 代替，或者在 all 属性上取消设置。

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

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

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

选项 1

继承所有子项的宽度。所以添加这个：

.container > div {
  width: inherit;
}

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

Option 1 demo

选项 2

给.container > div自己的宽度：

.container > div {
  width: 300px;
}

Option 2 demo

【讨论】：

我应该只填写你的答案。哦，好吧

【解决方案2】：

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

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

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

查看您的小提琴编辑：

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

我已经定义了.container > div，其宽度将被.fixed 继承。请参阅box-sizing 属性以填充填充。

【讨论】：

【解决方案3】：

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

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

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

您的 sn-p 有什么问题是 inherit 值采用父级的值。在您的 sn-p 的父级中，您没有定义宽度，因此它是 width:auto 的 CSS 默认值

你也可以在父 div 中指定宽度为：

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

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

【讨论】：

【解决方案4】：

所有divs 到固定的应该有width: inherit。

【讨论】：

【解决方案5】：

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

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

根据您的填充调整宽度。我添加负边距纯粹是为了对齐红色和绿色边框。

【讨论】：