孩子正在计算屏幕的 100% 宽度，而不是父母答案

【问题标题】：Child is calculating 100% width from screen, not parent孩子正在计算屏幕的 100% 宽度，而不是父母
【发布时间】：2017-01-09 12:23:29
【问题描述】：

我正在尝试将进度条放入父级中，这非常困难。它是在 Jot 表单上完成的，但可以访问自定义 CSS 等，我已经使用了很多（我猜这可能会造成问题）。

进度条固定在顶部，在父元素 div.form-all 中作为第一个和第二个元素。我已经尝试了这里关于 box-sizing 等的所有常见建议，但似乎没有任何效果。

我怀疑这是因为父元素没有明确规定的宽度，因为这极大地解决了问题（但破坏了响应能力，因为它在小屏幕上从 ≈36% 宽度变为 100%）。

任何帮助将不胜感激。实际的表格可以在这里找到，丹麦语的 Jot 表格：

通过检查元素应该可以看到所有添加的自定义 CSS，但我会提到它之前已经工作过。

包含进度 div 的 div 具有以下 css 属性： .progressBarContainer.fixed { 位置：绝对；顶部：0；宽度：继承；背景：#FFF； z-index: 9999;}

通过 Jotform 编码，父级具有以下相关属性，没有位置属性： .form-all { 宽度：690 像素；宽度：100%；最大宽度：690px;}

提前谢谢你，克里斯。

【问题讨论】：

从 .progressBarContainer div 中移除固定类并检查。
能否请您发布相关的 HTML 和 CSS。如果您发布的链接失效/404，这个问题对于未来有类似问题的用户来说几乎没有用处。
你定义了.form-all { width: 690px; width: 100%; max-width: 690px; } - 一个属性的值太多
嗨 Banzay，这实际上是 Jotform 样式，但我完全同意。

标签： html css

【解决方案1】：

绝对位置解： 你说你正在使用position: fixed，但这不会继承父级的宽度。您需要将.progressBarContainer.fixed更改为position: absolute，然后将表单父.form-all添加position: relative。

这会将进度条的宽度设置为与表单相同。

固定位置解决方案： 有多种方法可以使进度条在屏幕上保持粘性。您要么必须在 CSS 中明确声明进度条的最大宽度，要么必须使用 JavaScript 解决方案声明 CSS。简单的 CSS 解决方案是将position: fixed 分配给.progressBarContainer.fixed，但是您必须将max-width: 690px 指定为.progressBarContainer.fixed。

【讨论】：

谢谢，成功了。我不知道位置标签的遗产属性。

【解决方案2】：

它的位置是fixed，这就是为什么当它设置为 100% 宽度时它会获得整个屏幕的宽度。参考here

假设您希望进度条停留在顶部，并且由于容器元素 .form-all 具有 690px 的 max-width 属性，请尝试将其应用于进度条元素，以防止它扩展到 100%屏幕宽度。

否则只需从进度条中删除fixed 定位。

【讨论】：

谢谢，也请参考！