子は親からではなく画面から100％の幅を計算しています

Question

親にプログレスバーをフィットしようとしています。これはJotフォームで行われますが、カスタムCSSなどにアクセスして、私は多くを利用しています（は問題を作成した可能性があります。）。

プログレスバーは一番上に固定され、親要素div.form-allは非常に最初の要素と2番目の要素です。私はここでボックスサイズについてのすべての共通の提案を試しましたが、何もうまくいかないようです。

これは、親要素に明示的に指定された幅がないためです。これは、問題を記念的に修正するためです（ただし、小さな画面では約36％から100％になります）。

ご協力いただければ幸いです。実際のフォームは、Jot形式のデンマーク語でここにあります。

追加されたすべてのカスタムCSSは、要素を調べることで表示する必要がありますが、以前は機能しました。

progress divを含むdivには、次のCSS属性があります。 .progressBarContainer.fixed { position：absolute; トップ：0; width：継承; 背景：#FFF; z屈折率：;： .FORM-すべて{ 幅：9999}

親ない位置属性と、次の関連する属性をJotformは、符号化により有し690px。 幅：100％; 最大幅：690px;}

ありがとうございます、Kris。

Answer 1

絶対位置ソリューション： あなたはposition: fixedを使用していると述べたが、これは親の幅を継承しません。 .progressBarContainer.fixedをposition: absoluteに変更し、フォームの親の.form-allを追加するには、position: relativeを追加する必要があります。

これで、進行状況バーの幅をフォームと同じに設定します。

---

固定位置策： あなたが画面上に粘着性のプログレスバーを保つことができるいくつかの方法があります。 CSSの進行状況バーの最大幅を明示的に指定するか、JavaScriptソリューションを使用してCSSを指定する必要があります。シンプルなCSSソリューションは、position: fixedを.progressBarContainer.fixedに割り当てておくことですが、​​〜.progressBarContainer.fixedを指定する必要があります。

Answer 2

位置はfixedです。そのため、100％幅に設定すると画面全体の幅を取得するのです。参照コンテナ要素.form-allは、プログレスバーの要素に適用してみてください690pxだけでなく100％に拡大することを防止するためのmax-width性質を持っているので、あなたはプログレスバーがトップに固執したいと仮定すると

ためhereを参照してください。画面の幅の

それ以外の場合は、fixedの位置をプログレスバーから削除するだけです。