ページまたはコンテンツの下部にあるフッターのいずれか低い方

debugcn 投稿 Dev

意志

私は次の構造を持っています：

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

<article>javascriptを使用してコンテンツを動的にロードします。このため、<article>ブロックの高さが変わる可能性があります。

<footer>コンテンツが多い場合はページの下部に、コンテンツが数行しかない場合はブラウザウィンドウの下部にブロックを配置したいと思います。

現時点では、どちらか一方を実行できますが、両方を実行することはできません。

だから、私がこれを行う方法を知っている人はいますか？<footer>ページ/コンテンツの下部または画面の下部（どちらが低いかに応じて）に固執するようにしてください。

zzzzBov

ライアン・フェイトの粘着性のあるフッターはとてもいいですが、基本的な構造が欠けていると思います*。

Flexboxバージョン

幸運なことに、古いブラウザをサポートしなくてもflexboxを使用できる場合は、スティッキーフッターが簡単になり、動的なサイズのフッターをサポートします。

フレックスボックスを使用してフッターを下部に貼り付ける秘訣は、同じコンテナー内の他の要素を垂直方向に曲げることです。必要なのは、次display: flexのflex値より大きいフルハイトのラッパー要素と少なくとも1つの兄弟だけ0です。

_CSS：

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

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
article {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

フレックスボックスを使用できない場合、私の基本構造は次のとおりです。

<div class="page">
  <div class="page__inner">
    <header class="header">
      <div class="header__inner">
      </div>
    </header>
    <nav class="nav">
      <div class="nav__inner">
      </div>
    </nav>
    <main class="wrapper">
      <div class="wrapper__inner">
        <div class="content">
          <div class="content__inner">
          </div>
        </div>
        <div class="sidebar">
          <div class="sidebar__inner">
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer__inner">
      </div>
    </footer>
  </div>
</div>

これはそれほど遠くないです：

<div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
</div>

フッターを固定する秘訣は、フッターをその包含要素の下部のパディングに固定することです。これには、フッターの高さが静的である必要がありますが、フッターは通常静的な高さであることがわかりました。

_HTML：

<div id="main-wrapper">
    ...
    <footer>
    </footer>
</div>

_CSS：

#main-wrapper {
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

#main-wrapper {
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

フッターがに固定され#main-wrapperているので#main-wrapper、子が長くない限り、少なくともページの高さである必要があります。これは、することによって行われ#main-wrapperていmin-heightのを100%。また、その親ということを覚えている、htmlとbodyだけでなく、ページのように背の高いようにする必要があります。

_CSS：

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

#main-wrapper {
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

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

#main-wrapper {
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

もちろん、このコードはコンテンツがない場合でもフッターをページの下部から強制的に削除するため、私の判断に疑問を投げかける必要があります。最後のトリックは、が使用するボックスモデルを変更し#main-wrapperて、min-heightの100%に100pxパディングが含まれるようにすることです。

_CSS：

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

#main-wrapper {
    box-sizing: border-box;
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

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

#main-wrapper {
  box-sizing: border-box;
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

これで、元のHTML構造のスティッキーフッターができました。ちょうどことを確認するfooterのがheightに等しい#main-wrappers 'はpadding-bottom、あなたが設定する必要があります。

^{* Faitの構造に誤りがあるのは、不要な要素を追加しながら.footer、.header要素を異なる階層レベルに設定するため.pushです。}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-04-8

コメントを追加

サインイン

分類Dev

Related 関連記事

記事