固定宽度元素采用其流体父级大小？

Question

我在 % width 容器中有一个固定的 div。

HTML：

<div class="master-container">
    <div class="container">
        <div class="fixed">
        </div>
    </div>
</div>

CSS：

.master-container {
    max-width: 1200px;
    margin: 0 auto;
}
.container {
    width: 30%;
}

.fixed {
    position: fixed;
}

我查看了其他一些 SO 帖子：

Set width of a "Position: fixed" div relative to parent div

Set width of fixed positioned div relative to his parent having max-width

一般的答案是在固定元素上设置width: inherit。问题是它仍然从 body 继承宽度而不是它的百分比（除非我在父级上设置了固定宽度）。

那么，当父级的宽度设置为百分比时，如何让固定 div 调整到其直接父级的大小。

我只寻求 CSS 解决方案 - 有可能还是必须 JS 解决？

编辑

到目前为止，大多数解决方案都继承了页面的宽度，我需要让固定 div 占据以网页为中心的主控居中容器的 30%，它的最大宽度为 1200 像素。

Answer 1

如果您的父 div 与主体的宽度相同，则此“工作”很好。当然，它只是在表面上起作用，而不是在现实中起作用。这个 div 占据了浏览器宽度的 30%，就像它的父 div 一样。

html, body {
    margin: 0;
}

.container {
    width: 30%;
    height: 400px;
    background: linear-gradient(green, white)
}

.fixed {
    position: fixed;
    background: red;
    width: inherit;
    height: 10px;
}

<div class="container">
    <div class="fixed"></div>
</div>

否则，要在 CSS 中完成此操作，您有几个选择，具体取决于您的结构。

根据您的问题，我们知道fixed div 的直接父级具有百分比宽度（我们将使用30%）。 .container div 必须有一个或多个父 div，它们具有：

1. 以像素为单位的固定宽度
2. 百分比宽度
3. 以 vw、em 等为单位的宽度

这将（可能）在 CSS 中计算。否则，我不知道您为什么需要纯 CSS 解决方案。

因此，如果您有一个宽度为500px 的容器 div 的父级，则可以通过将 500px 的 30% 设置为 fixed div 与 .container 的宽度相同：

html, body {
    margin: 0;
}

.parent {
    width: 500px;
    height: 400px;
    background: linear-gradient(blue, white)
}

.container {
    width: 30%;
    height: 400px;
    background: linear-gradient(green, white)
}

.fixed {
    position: fixed;
    background: red;
    width: calc(500px * .3);
    height: 10px;
}

<div class="parent">
    <div class="container">
        <div class="fixed"></div>
    </div>
</div>

如果.parent div 的宽度为% 或vw 或其他任何值，这也可以：

html, body {
    margin: 0;
}

.parent {
    width: 50%;
    height: 400px;
    background: linear-gradient(blue, white)
}

.container {
    width: 30%;
    height: 400px;
    background: linear-gradient(green, white)
}

.fixed {
    position: fixed;
    background: red;
    width: calc(50% * .3);
    height: 10px;
}

<div class="parent">
    <div class="container">
        <div class="fixed"></div>
    </div>
</div>

显然，您必须知道所有父级的宽度，直到 body 或最近的具有固定宽度的 div，并在 CSS calc 中进行数学计算以进行调整。但同样，假设没有 JS 并且所有父 div 宽度都在 CSS 中定义，这是可以做到的。

编辑：根据您更新的问题：

html, body {
    margin: 0;
}

.master-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background: linear-gradient(blue, white)
}

.container {
    width: 30%;
    height: 400px;
    background: linear-gradient(green, white)
}

.fixed {
    position: fixed;
    background: red;
    width: calc(1200px * .3);
    height: 10px;
}

@media (max-width: 1200px) {
    .fixed {
        width: 30%;
    }
}

<div class="master-container">
    <div class="container">
        <div class="fixed"></div>
    </div>
</div>

Answer 2

您可以使用width: inherit; 实现此目的

.container {
    width: 30%;
    background: #444;
    height: 50px;
}

.fixed {
    width: inherit;
    height: 40px;
    position: fixed;
    background: #ccc;
}

<div class="container">
    <div class="fixed">
    </div>
</div>

您也可以查看Fiddle

Answer 3

您不能使用基于百分比的宽度来执行此操作。一旦你固定了一个元素，它的大小和位置属性就变得相对于 viewport，而不是父元素。它有效地“脱离”其父级并成为一个新的stacking context，因此即使 CSS 属性仍然可以被继承，它的计算方式也完全不同。

您唯一的选择是使用以像素为单位的固定宽度，并在必要时使用 JS 同步两者。

Answer 4

您必须为 .container 设置宽度（以像素为单位）或向 .container 父级添加宽度。

.container {
    width: 100px;
}

或

<div class="containerparent">
<div class="container">
    <div class="fixed"> </div>
</div>
</div>

和

  .container-parent {
        width: 100px;
    }

    .container {
        width: 30%;
    }