jquery - 本文のコンテンツの量に関係なく、ページの一番下までフッターを押し下げるにはどうすればよいですか?

Question

Web ページのメイン コンテンツのコンテンツを動的に生成しています。ページにはヘッダーとフッターもあります。ヘッダーは問題なく上部に固定されたままですが、フッターはページの下部に固定されるのではなく、本文の下部に収まっています。動的に生成されるコンテンツの量がゼロまたは最小限の場合でも、フッターをページの下部に配置したいと考えています。どうやってやるの？

Answer 1

ページ + コンテンツの高さと、Web サイトがあるウィンドウの高さを検出する必要があります。高さがウィンドウよりも小さい場合は、位置を固定する必要があります。それ以外の場合は、通常どおりに座って、コンテンツによって押し下げられます。これが一般的なアプローチです。コードを投稿すると、それを機能させる方法を示すことができます。

Answer 2

スティッキー フッターの例を次に示します: http://twitter.github.io/bootstrap/examples/sticky-footer.html

次の CSS は、上記のリンクから取得されます。

CSS

/* Sticky footer styles
-------------------------------------------------- */
html,
body {
     height: 100%;
     /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
     min-height: 100%;
     height: auto !important;
     height: 100%;
     /* Negative indent footer by it's height */
     margin: 0 auto -60px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
     height: 60px;
}
#footer {
     background-color: #f5f5f5;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
     margin-left: -20px;
     margin-right: -20px;
     padding-left: 20px;
     padding-right: 20px;
}
}



/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
     width: auto;
     max-width: 680px;
}
.container .credit {
     margin: 20px 0;
}



/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
     width: auto;
     max-width: 680px;
}
.container .credit {
     margin: 20px 0;
}