Question

我在％宽度容器中有一个固定的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。问题是它仍然从身体继承宽度而不是其百分比（除非我在父级上设置固定宽度）。

那么，当父母的宽度设置为百分比时，如何将固定的div设置为它的直接父级。

只有CSS解决方案 - 是否可能或者我必须使用JS？

修改

到目前为止，我已经提供了许多解决方案 - 谢谢，但是大多数都继承了我需要获得固定div的页面宽度，以占据中心位置的30％主控中心容器网页，最大宽度为1200像素。

Answer 1

您可以使用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 2

如果您的父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：

固定宽度（以像素为单位）
宽度百分比
vw，em等的宽度

这将（可能）用CSS计算。否则，我不知道为什么你会想要一个只有CSS的解决方案。

因此，如果您的容器div的父级宽度为500px，则可以使fixed div与.container的宽度相同，为其提供30％的500px ：

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>

显然，您必须知道所有父母的宽度，直到身体或具有固定宽度的最近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 3

您无法使用基于百分比的宽度执行此操作。只要修复了元素，其大小和位置属性就会相对于视口而不是父元素。它有效地“突破”其父级并成为一个新的stacking context所以即使CSS属性仍然可以继承，它的计算方式完全不同。

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

Answer 4

您必须将宽度（以像素为单位）设置为.container或将宽度添加到.container parent。

.container {
    width: 100px;
}

或

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

和

  .container-parent {
        width: 100px;
    }

    .container {
        width: 30%;
    }

固定宽度元素，它的流动父母大小？

4 个答案: