ページがスティッキーヘッダーなしで無限に拡張する

前回のアップデート後、奇妙な不具合が発生しており、さらにデバッグする方法がわかりません。フォーラムのリンクは https://community.make.com です。現在、ランディングページには固定ヘッダーがあり、すべて正常に機能しています。しかし、私が以前持っていて、実際には望んでいるのは、ランディングページに固定されないヘッダーです。しかし今、固定宣言を無効にすると:

ページが延々と続き、フッターに到達できなくなります。

同様のレイアウトを使用している別のページでも再現できますが、他のインスタンスでは再現できません。したがって、テーマで宣言している何かが原因であるはずですが、それが何であるかはわかりません。誰か推測できますか?

opを更新し、以前のソリューションを削除しました。

「いいね!」 2

こんにちは。

これは --header-offset が原因のようです。ヘッダーが固定されていない場合、スクロール中に変化します。これらのページで機能するように --header-offset を固定する必要があると思います。

たとえば、このようなものでしょうか? :thinking:

html.desktop-view {
  --header-offset: 81px !important;
}
「いいね!」 1

@Don、ご確認いただきありがとうございます!私も、これが動的なヘッダーオフセット宣言に関連していると考えていました。一方で、メタや他のインスタンスではヘッダーを非固定に変更でき、問題ありません。例えば、このインスタンスでは同様のコンポーネントを使用していますが、ページは非固定ヘッダーで拡張されません: https://community.couchers.org/

それにもかかわらず、なぜこの他のテーマではそうなるのか疑問に思っています。また、ヘッダーオフセットの値が実際にどのように計算され、何に使用されているのかも疑問です。

「いいね!」 1

なるほど… :thinking: 次のヒントです :slightly_smiling_face:

他のサイトでも確認しました。サイドバーの新しい変更が原因かもしれません。
https://community.couchers.org/ これはサイドバーのコードが含まれていない古いバージョンです。

.sidebar-wrapper の高さは calc(100vh - var(--header-offset)) です。ヘッダーが固定されていない場合、スクロール時にコンテンツを押し出す原因になると思います。

height: 0; または display: none を設定できます。

#main-outlet-wrapper .sidebar-wrapper {
  display: none;
}