css

Question

マークアップの右と左の両方の div をクリアするフッターを含む単純な 2 列のレイアウトがあります。私の問題は、すべてのブラウザーでフッターをページの下部に配置できないことです。コンテンツがフッターを押し下げる場合は機能しますが、常にそうであるとは限りません。

score 210 · Accepted Answer

固定フッターを取得するには:

あなたのコンテンツのために<div>持ってください。class="wrapper"
場所の閉鎖</div>の直前。wrapper<div class="push"></div>
場所の閉鎖直後。_</div>wrapper<div class="footer"></div>

* {
    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 */
}

score 76 · Accepted Answer

付箋フッター`display: flex`

Philip Walton の sticky footerに触発されたソリューション。

説明

このソリューションは、次の場合にのみ有効です。

クロム≧21.0
Firefox ≥ 20.0
Internet Explorer 10 以上
サファリ≧6.1

flexこれはdisplayに基づいており、コンテナ内の余分なスペースを占有するためにflex-grow、要素を高さまたは幅( がそれぞれまたはflow-directionに設定されているcolumn場合) に拡張できるプロパティを利用します。row

として定義されているvh単位も活用します。1vh

ビューポートの高さの 1/100

したがって、高さの100vhit は、ビューポートの高さ全体にまたがるように要素に指示する簡潔な方法です。

Web ページを次のように構成します。

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

ページの下部にフッターを固定するには、フッターをページの下部に押し込むのに必要なだけ、本文とフッターの間のスペースを大きくする必要があります。

したがって、レイアウトは次のようになります。

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

実装

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.spacer {
    flex: 1;
}

/* make it visible for the purposes of demo */
.footer {
    height: 50px;
    background-color: red;
}

<body>
    <div class="content">Hello World!</div>
    <div class="spacer"></div>
    <footer class="footer"></footer>
</body>

JSFiddleで遊ぶことができます。

サファリの癖

Safari にはプロパティの実装に欠陥flex-shrinkがあることに注意してください。これにより、コンテンツを表示するために必要な最小の高さよりもアイテムを縮小できます。この問題を修正するには、flex-shrinkプロパティを明示的に 0 に設定し、上記の例で.contentとを設定する必要があります。footer

.content {
  flex-shrink: 0;
}

.footer {
  flex-shrink: 0;
}

または、要素のflexスタイルを次のように変更します。spacer

.spacer {
  flex: 1 0 auto;
}

この 3 つの値の省略形は、次の完全なセットアップと同等です。

.spacer {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

どこでもエレガントに機能します。

score 30 · Accepted Answer

以下を使用position: absoluteしてフッターをページの下部に配置できますが、2 つの列が適切margin-bottomであることを確認して、フッターによって遮られないようにしてください。

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}

score 14 · Accepted Answer

これは、魅力的に機能するjQueryを使用したソリューションです。ウィンドウの高さがボディの高さより大きいかどうかをチェックします。そうである場合は、フッターの margin-top を変更して補正します。Firefox、Chrome、Safari、Opera でテスト済み。

$( function () {

    var height_diff = $( window ).height() - $( 'body' ).height();
    if ( height_diff > 0 ) {
        $( '#footer' ).css( 'margin-top', height_diff );
    }

});

フッターにすでに margin-top (たとえば 50 ピクセル) がある場合は、最後の部分を次のように変更する必要があります。

css( 'margin-top', height_diff + 50 )

score 11 · Accepted Answer

の CSS を次のように設定#footerします。

position: absolute;
bottom: 0;

次に、またはの下部にpaddingまたはを追加して、またはの高さに合わせて、またはが重なったときにそれらを覆う必要があります。margin#sidebar#content#footer#footer

また、私の記憶が正しければ、IE6 にはbottom: 0CSS に問題があります。IE6 用の JS ソリューションを使用する必要がある場合があります (IE6 に関心がある場合)。

score 1 · Accepted Answer

この質問について、私が見た回答の多くは扱いにくく、実装が難しく、非効率的だったので、私はそれを試してみて、css と html のほんの一部である独自のソリューションを思いつくと思いました

html,
body {
  height: 100%;
  margin: 0;
}
.body {
  min-height: calc(100% - 2rem);
  width: 100%;
  background-color: grey;
}
.footer {
  height: 2rem;
  width: 100%;
  background-color: yellow;
}

<body>
  <div class="body">test as body</div>
  <div class="footer">test as footer</div>
</body>

これは、フッターの高さを設定し、css calc を使用して、フッターがまだ一番下にあるページの最小の高さを計算することで機能します。これが一部の人々に役立つことを願っています:)

score 1 · Accepted Answer

次の手順を使用して、絶対配置と z-index を使用して、任意の解像度でスティッキーフッター div を作成します。

position: absolute; bottom: 0;目的の高さでフッター div を作成します
フッターのパディングを設定して、コンテンツの下部とウィンドウの下部の間に空白を追加します
div本文コンテンツをラップするコンテナを作成しますposition: relative; min-height: 100%;
div高さにフッターのパディングを加えた値に等しい下部パディングをメインコンテンツに追加します。
フッターがクリップされている場合はz-index、コンテナーよりも大きいフッターを設定しますdiv

次に例を示します。

<!doctype html>
<html>
  <head>
    <title>Sticky Footer</title>
    <meta charset="utf-8">
    <style>
      .wrapper { position: relative; min-height: 100%; }
      .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
      .column { height: 2000px; padding-bottom: 300px; background-color: grxqeen; }
      /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="column">
        <span>hello</span>
      </div>
      <div class="footer">
        <p>This is a test. This is only a test...</p>
      </div>
    </div>
  </body>
</html>

score 1 · Accepted Answer

div.fixed {
   position: fixed;
   bottom: 0;
   right: 0;
   width: 100%;
   border: 3px solid #73AD21;
}

<body style="height:1500px">

   <h2>position: fixed;</h2>

   <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

   <div class="fixed">
      This div element has position: fixed;
   </div>

</body>

score 0 · Accepted Answer

これらの純粋なcssソリューションはいずれも、コンテンツの動的なサイズ変更（少なくともFirefoxとSafariでは）では適切に機能しません。たとえば、コンテナdiv、ページに背景を設定してから、div内のテーブルのサイズを変更（数行追加）すると、テーブルはスタイル設定された領域の下部から突き出る可能性があります。つまり、フォントの色と背景色の両方が白であるため、テーブルの半分を黒のテーマで白にし、テーブルの半分を完全に白にすることができます。基本的にテーマローラーページでは修正できません。

ネストされたdivマルチカラムレイアウトは醜いハックであり、フッターを貼り付けるための100％最小高さのボディ/コンテナdivは醜いハックです。

私が試したすべてのブラウザで機能する唯一のスクリプトなしのソリューション：thead（ヘッダー用）/ tfoot（フッター用）/ tbody（任意の数の列のtd）と100％の高さのはるかに単純で短いテーブル。しかし、これはセマンティックとSEOの欠点を認識しています（tfootはtbodyの前に表示される必要があります。ARIAの役割はまともな検索エンジンに役立つ可能性があります）。

score 0 · Accepted Answer

1 つの解決策は、ボックスの最小高さを設定することです。残念ながら、IE ではあまりサポートされていないようです(驚き)。

score 0 · Accepted Answer

非常に単純なライブラリhttps://github.com/ravinderpayal/FooterJSを作成しました

使い方はとても簡単です。ライブラリを含めた後、このコード行を呼び出すだけです。

footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

フッターは、異なるパラメーター/ID で上記の関数を呼び出すことにより、動的に変更できます。

footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

注:- CSS を変更または追加する必要はありません。ライブラリは動的です。これは、ページの読み込み後に画面のサイズが変更されても、フッターの位置がリセットされることを意味します。CSS はしばらくの間問題を解決しますが、デスクトップからタブレットへ、またはその逆にディスプレイのサイズが大幅に変化すると、コンテンツと重なるか、粘着性がなくなるため、このライブラリを作成しました。

もう 1 つの解決策は CSS メディアクエリですが、このライブラリは自動的に動作し、すべての基本的な JavaScript 対応ブラウザでサポートされていますが、さまざまなサイズの画面に合わせてさまざまな CSS スタイルを手動で記述する必要があります。

CSS ソリューションを編集します。

@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
    /* For mobile phones: */
    #footer {
        width: 100%;
        position:fixed;
        bottom:0;
    }
}

現在、ディスプレイの高さがコンテンツの長さよりも大きい場合は、フッターを下部に固定します。そうでない場合は、スクロールして表示する必要があるため、自動的にディスプレイの最後に表示されます。

そして、JavaScript/ライブラリよりも優れたソリューションのようです。

score 0 · Accepted Answer

複数の人がこの単純な問題に対する答えをここに挙げていますが、私が間違っていたことを理解するまで私がどれほどイライラしていたかを考えると、1 つ追加する必要があります。

前述のように、これを行う最も簡単な方法は次のようなものです..

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: transparent;
    position: static;
    height: 100%;
    margin-bottom: 30px;
}

.site-footer {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

ただし、投稿で言及されていないプロパティは、おそらく通常はデフォルトであるため、 body タグのposition: staticです。相対位置が機能しません!

私のワードプレスのテーマは、デフォルトの本文表示を上書きし、不快なほど長い間私を混乱させました.

score 0 · Accepted Answer

http://1linelayouts.glitch.me/の例 4を見てください。Una Kravets がこの問題を解決しています。

これにより、ヘッダー、メイン、フッターの 3 層ページが作成されます。

- フッターは常に下部に表示され、コンテンツに合わせてスペースを使用します。

-ヘッダーは常に上部に表示され、コンテンツに合わせてスペースが使用されます。

-メインは、必要に応じて、画面を埋めるのに十分な、使用可能な残りのスペース (スペースの残りの部分) を常にすべて使用します。

HTML

<div class="parent">
  <header class="blue section" contenteditable>Header</header>
  <main class="coral section" contenteditable>Main</main>
  <footer class="purple section" contenteditable>Footer Content</footer>
</div>

.parent {
  display: grid;
  height: 95vh; /* no scroll bars if few content */
  grid-template-rows: auto 1fr auto;
}

score 0 · Accepted Answer

jQuery クロスブラウザカスタムプラグイン - $.footerBottom()

または、私のように jQuery を使用し、フッターの高さをに設定するautoか、好きなように設定fixします。とにかく動作します。このプラグインは jQuery セレクターを使用するため、機能させるには、jQuery ライブラリーをファイルに含める必要があります。

プラグインの実行方法は次のとおりです。jQueryをインポートして、このカスタムjQueryプラグインのコードをコピーして、jQueryをインポートした後にインポートしてください！とてもシンプルで基本的なことですが、重要です。

それを行うときは、次のコードを実行するだけです。

$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer" 
// by setting target to {target:"div.footer"}

ドキュメント準備完了イベント内に配置する必要はありません。そのままでよく走ります。ページがロードされ、ウィンドウのサイズが変更されると、フッターの位置が再計算されます。

これは、理解する必要のないプラグインのコードです。それを実装する方法を知っているだけです。それはあなたのために仕事をします。ただし、それがどのように機能するかを知りたい場合は、コードを調べてください。私はあなたのためにコメントを残しました。

//import jQuery library before this script

// Import jQuery library before this script

// Our custom jQuery Plugin
(function($) {
  $.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
    var defaults = {
      target: "footer",
      container: "html",
      innercontainer: "body",
      css: {
        footer: {
          position: "absolute",
          left: 0,
          bottom: 0,
        },

        html: {
          position: "relative",
          minHeight: "100%"
        }
      }
    };

    options = $.extend(defaults, options);

    // JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
    $(options.target).css({
      "position": options.css.footer.position,
      "left": options.css.footer.left,
      "bottom": options.css.footer.bottom,
    });

    $(options.container).css({
      "position": options.css.html.position,
      "min-height": options.css.html.minHeight,
    });

    function logic() {
      var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
      $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
      $(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
      console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
    };

    // DEFINE WHEN TO RUN FUNCTION
    $(window).on('load resize', function() { // Run on page loaded and on window resized
      logic();
    });

    // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
    // return this.each(function() {
    //   this.checked = true;
    // });
    // return this;
  };
})(jQuery); // End of plugin


// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5

/* Set your footer CSS to what ever you like it will work anyway */
footer {
  box-sizing: border-box;
  height: auto;
  width: 100%;
  padding: 30px 0;
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
  <div class="content">
  <header>
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
      </ul>
    </nav>
  </header>

  <section>
      <p></p>
      <p>Lorem ipsum...</p>
    </section>
  </div>
  <footer>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
  </footer>

score 0 · Accepted Answer

私が知っている古いスレッドですが、応答性の高いソリューションを探している場合は、この jQuery の追加が役立ちます。

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

完全なガイドはこちらにあります: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

score 0 · Accepted Answer

フレックスソリューションは、フッターを固定する限りはうまくいきましたが、残念ながら本文をフレックスレイアウトを使用するように変更すると、ページレイアウトの一部が変更され、改善されませんでした。最終的に私のために働いたのは：

    jQuery(document).ready(function() {

    var fht = jQuery('footer').outerHeight(true);
    jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");

});

https://css-tricks.com/couple-takes-sticky-footer/の ctf0 の応答からこれを取得しました

score -1 · Accepted Answer

コンテンツとサイドバーの周りにコンテナ div (overflow:auto を使用) を配置してみてください。

それでもうまくいかない場合、フッターが正しく表示されないスクリーンショットやリンクの例はありますか?

css - フッターを Web ページの下部に配置するにはどうすればよいですか?

30 に答える 30

付箋フッターdisplay: flex

説明

実装

サファリの癖

HTML

CSS

Related

Reference

付箋フッター`display: flex`