web-dev-qa-db-ja.com

「高さ」が定義されている場合、「position：sticky」が機能しない

私は、ユーザーが最初にメインエリアの下にフッターを表示するランディングページを作成しています。さらに下にスクロールすると、フッターがスティッキーヘッダーであることがわかります。これを実現するために純粋なCSSを使用することを目指しています。メインコンテンツとフッターの全画面表示を取得するには、heightプロパティを2つの異なる値に設定します：92％と8％（vhを使用しても機能しません）。 CSSで指定するheight（さまざまな単位およびすべて）に関係なく、フッターdivは固定されません。 heightプロパティを削除するとすぐに、意図したとおりに機能します。

ここに私のページのスクリーンショットがありますbeforeheightプロパティを削除します：

With %, landing

ご覧のとおり、not stick：

With %, scrolled

heightプロパティ値を削除した後、does stick：

Without %, scrolled

関連するコードの下：

html,
body {
  height: 100%;
  margin: 0;
}

#main {
  height: 92%;
}

#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

#landingContent {
  width: 20vw;
}

#footerNav {
  height: 8%;
  display: flex;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}
<div id="main">
  <div id="landing">
    <div id="landingContent">
      <h1 class="logo">Logo</h1>
      <p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.</p>
      <button>Button</button>
    </div>
  </div>
</div>
<div id="footerNav">
  <div id="footerNavContent">
    <h1 class="logo">Logo</h1>
  </div>
</div>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>

overflowプロパティを使用すると問題が発生する可能性があることを読みましたが、heightが他の人にとって問題であるということは聞いていません。もちろん間違っているかもしれません。

私はテストしました：

  • Firefox 61（夜間）
  • Safari 53（技術プレビュー）
  • Chrome 65

EDIT：大きな開発; #mainからheightプロパティを削除すると、#footerNavスティッキーが保持されます。

htmlcssflexboxsticky
8
Lachlan Shoesmith

ここでの問題はheightにありますが、あなたが考えたheightにはありません。最初に sticky position の定義から始めましょう。

スティッキーに配置された要素は、計算された位置値がスティッキーな要素です。相対的な位置として扱われます含まれるブロックが指定されたしきい値を超えるまで（topをauto以外の値に設定するなど）そのフロールート（またはコンテナーitは内部でスクロールします）。この時点で、包含ブロックの反対側のエッジに会うまで「スタック」として扱われます。

ここで重要な部分は、要素がその包含ブロックのエッジに到達したときにスティッキーの位置がendであることを説明する最後の文です。本文はheight:100%であり、コンテンツのオーバーフローがあります。

したがって、メインの高さを92％に設定し、フッターを8％に設定する場合、既にが含まれるブロックの反対側のエッジでフッターを作成しました。これは、背景色をボディに追加した図です。これをはっきりと見ることができます。

html,
body {
  height: 100%;
  margin: 0;
}
html {
  background:white;
}
body {
  background:blue;
}

#main {
  height: 92%;
}
#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}
#landingContent {
  width: 20vw;
}
#footerNav {
  height: 8%;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0px;
}
<div id="main">
    <div id="landing">
        <div id="landingContent">
            <h1 class="logo">Logo</h1>
            <p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.</p>
            <button>Button</button>
        </div>
    </div>
</div>
<div id="footerNav">
    <div id="footerNavContent">
        <h1 class="logo">Logo</h1>
    </div>
</div>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>

あなたが見ることができるように、ロゴはすでに体の底にあるので、それを粘着性があるように動かす方法はありません。また、コンテンツがあふれています。

ここで、メインコンテンツの高さを少し下げると、フッターが青い部分（body）の下部に到達したときに終了する小さな粘着性の動作を確認できます。

html,
body {
  height: 100%;
  margin: 0;
}
html {
  background:white;
}
body {
  background:blue;
}

#main {
  height: 82%;
}
#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}
#landingContent {
  width: 20vw;
}
#footerNav {
  height: 8%;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0px;
}
<div id="main">
    <div id="landing">
        <div id="landingContent">
            <h1 class="logo">Logo</h1>
            <p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.</p>
            <button>Button</button>
        </div>
    </div>
</div>
<div id="footerNav">
    <div id="footerNavContent">
        <h1 class="logo">Logo</h1>
    </div>
</div>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>

この問題を修正するには、height:100%をbodyに設定しないようにする必要があります。代わりにmin-heightを使用するか、高さを自動に保つことができます。メインとフッターにvhユニットを考慮することもできます：

html,
body {
  /*height: 100%;
    no needed
  */ 
  margin: 0;
}
html {
  background:white;
}
body {
  background:blue;
}

#main {
  height: 92vh;
}
#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}
#landingContent {
  width: 20vw;
}
#footerNav {
  height: 8vh;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0px;
}
<div id="main">
    <div id="landing">
        <div id="landingContent">
            <h1 class="logo">Logo</h1>
            <p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.</p>
            <button>Button</button>
        </div>
    </div>
</div>
<div id="footerNav">
    <div id="footerNavContent">
        <h1 class="logo">Logo</h1>
    </div>
</div>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>

詳細/例に関する関連質問：

なぜposition：stickyの要素が親の下部に貼り付かないのですか？

「スクロールボックス」とは？

position：stickyに `bottom：0`を指定した場合、なぜ仕様と異なる何かをするのですか？

9
Temani Afif