孩子正在计算屏幕上的100％宽度，而不是父母

我正在尝试将进度条放入父级，这很奇怪。它是在Jot表单上完成的，但是可以访问自定义CSS等等，我已经使用了很多（，这可能会产生问题，我猜）。孩子正在计算屏幕上的100％宽度，而不是父母

进度条被定位固定在顶部，并是在div.form-所有作为非常第一和第二元件的父元素。我在这里尝试了所有关于盒子大小等的常见建议，但似乎没有任何工作。

我的怀疑是因为父元素没有明确指定的宽度，因为这样可以很好地修复问题（但打破了响应，因为它在小屏幕上从≈36％宽度变为100％）。

任何帮助将不胜感激。实际的形式可以在这里找到，在记的形式，在丹麦：

所有添加的自定义CSS应该是通过检查可见的元素，但我会提到它起过作用。

包含进度div的div具有以下css属性： .progressBarContainer.fixed { position：absolute; top：0; width：inherit; 背景：#FFF; z索引：9999;}

父具有由Jotform编码以下相关属性，没有位置属性： .FORM-所有{ 宽度：690px; 宽度：100％; 最大宽度：690px;}

谢谢你在前进，克里斯。

来源

2017-01-09 K. Vind

删除.progressBarContainer div中的类并检查。 –

请你能发布相关的HTML和CSS。如果你发布的链接去世/ 404，这个问题对于有类似问题的未来用户来说没有多大用处。 – Nope

您定义了'.form-all {width：0;宽度：690px; 宽度：100％; max-width：690px; }' - 一个属性值太多 – Banzay

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

这将然后设置进度条的宽度是相同的形式。

固定位置解决方案： 有许多的方法可以保持进度条粘在屏幕上。您将不得不明确声明CSS中的进度条的最大宽度，或者使用JavaScript解决方案指定CSS。简单的CSS解决方案将保留position: fixed分配给.progressBarContainer.fixed，但您必须指定到.progressBarContainer.fixed。

来源

2017-01-09 12:30:28 Pegues

谢谢你，这个伎俩。我并不知道位置标记的遗产属性。 –

它的位置是fixed这就是为什么当它被设置为100％的宽度它获得了整个屏幕的宽度。参考

假设你想在进度条贴到顶部，由于容器元素.form-all见here具有的max-width财产690px尝试将其应用到进度条元素，以及防止其扩大至100％的屏幕宽度。

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

来源

2017-01-09 12:28:32

谢谢，也供参考！ –

孩子正在计算屏幕上的100％宽度，而不是父母

回答

相关问题