108

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

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

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

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

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

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

4

4 に答える 4

116

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


Flexboxバージョン

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

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

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これは、hasofを作成することによって行わ#main-wrappermin-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-height100%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構造のスティッキーフッターができました。'sが' footersheightと等しいことを確認してください。設定する必要があります。#main-wrapperpadding-bottom


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

于 2012-09-03T19:27:30.967 に答える
13

Ryan Faitのスティッキーフッターは、私が過去に何度か使用したシンプルなソリューションです。

基本的なHTML

<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</div>
<div class="footer"></div>

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

これを、これらの線に沿った何かですでに得られた結果と同様に翻訳します。

HTML

<body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>

CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

フッターの高さに合わせてラッパーマージンのネガを更新し、divを押すことを忘れないでください。幸運を!

于 2012-09-02T19:45:33.340 に答える
0

マークアップを追加せずにこの問題を解決しようとしていたので、次の解決策を使用することになりました。

article {
  min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}

footer {
  height: 50px;
}

header {
   height: 50px;
}

nav {
  height: 50px;
}
<body>
  <div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
  </div>
</body>

記事の最小の高さを設定するには、ヘッダー、ナビゲーション、フッターの高さを知っている必要があります。これにより、記事のコンテンツが数行しかない場合、フッターはブラウザウィンドウの下部に固定されます。それ以外の場合、フッターはすべてのコンテンツの下に配置されます。

あなたはここに上に投稿されたこれと他の解決策を見つけることができます:https ://css-tricks.com/couple-takes-sticky-footer/

于 2019-04-02T12:28:59.487 に答える
0

css-gridでこれにアプローチしたいと思います。私はあなたの#main-wrapperdivで2つの部分を作ります。1つ目はコンテンツ用で、2つ目はフッター用です。

// HTML 

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

cssで

#main-wrapper {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: #a45657;
  color: white;
  text-align: center;
  padding: 10px;
  font-size: 20px;
}

ここで作業デモを確認できます(プロジェクトビューをチェックインしてください)。このコードは、私のお気に入りのCSSサイトcss-tricksから取得したものです。

于 2021-03-17T05:37:22.840 に答える