如何使父div的固定div宽度，它本身以百分比定义？答案

【问题标题】：How to make fixed div width of parent div, which itself is defined in percentage?如何使父div的固定div宽度，它本身以百分比定义？
【发布时间】：2017-05-18 13:27:48
【问题描述】：

我在将固定 div 设为其父元素的宽度时遇到问题，该父元素本身是相对于另一个 div 定义的。

一开始可能不太清楚，所以这里有一个说明情况的代码：

HTML

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

CSS

.grandparent {
     width:100px;
     position:relative;
 }

.parent {
     width:70%;
     position:relative;
 }

.fixed {
     width:100%;
     position:fixed;   /* This div must be fixed and have 100% width relative to parent */
 }

这是JSFiddle。

.fixed div 有什么方法可以在固定位置的同时继承其父级的宽度？

谢谢。

【问题讨论】：

你不能...position:fixed总是与视口相关。目前尚不清楚您要做什么...也许position:sticky？
是什么让它需要固定位置？正如 Paulie_D 所说，这是基于浏览器窗口的。如果需要位置样式，您可以尝试使用“绝对”或“相对”定位。 'Absolute' 相对于其第一个定位的父元素。
@Paulie_D 我试图继承父级的宽度，同时使其成为固定的 div。这就是我使用position:fixed 的原因。这不可能吗？
@Matthias 使用纯 CSS 是的。你需要 javascript。

标签： html css width fixed

【解决方案1】：

使用postion: absolute 而不是position: fixed。

绝对定位适用于第一个相对父级。固定适用于窗口。

然后，您可以使用 top、left、right 和 bottom 属性将 div 相对于其父级放置在视口中。

小提琴：https://jsfiddle.net/k0vndvzj/3/

【讨论】：

问题是我希望 .fixed 被修复。有什么办法可以在它从其父级继承宽度时固定它的位置？
它将相对于其父级完全固定。或者，如果您想要更高级的控件，您可以使用 javascript 设置从您想要的任何元素检索的特定宽度。见：jsfiddle.net/k0vndvzj/4
这是个好主意。不幸的是（我没有指定）在我的网站上它是关于一个固定的导航栏，它首先与页面一起向下滚动（position:relative），然后（通过 js）在到达顶部时得到固定（position:fixed）。但是谢谢你，我会按照你的建议通过 javascript 来做。

【解决方案2】：

position: fixed 是相对于窗口视口的，只需从 .fixed {...} 中删除 position: fixed; 就可以了

【讨论】：