私は一般的にcssを使ってフッターをフラッシュするテクニックに精通しています。
しかし、私はこの方法をTwitterのブートストラップでうまく機能させるのに問題を抱えています。Twitterのブートストラップは本質的に応答性が高いためです。 Twitterのブートストラップを使用する上記のブログ記事で説明されているアプローチを使用してフッターをページの一番下までフラッシュさせることはできません。
スニペットを見つけました ここ ブートストラップには本当にうまくいきます
HTML:
<div id="wrap">
<div id="main" class="container clear-top">
<p>Your content here</p>
</div>
</div>
<footer class="footer"></footer>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
これはBootstrap 2.2.1に含まれています。
ブートストラップ3.x
Navbarコンポーネントを使用して.navbar-fixed-bottom
クラスを追加します。
<div class="navbar navbar-fixed-bottom"></div>
ブートストラップ4.x
<div class="navbar fixed-bottom"></div>
body { padding-bottom: 70px; }
を追加することを忘れないでください。
ドキュメント: http://getbootstrap.com/components/#navbar-fixed-bottom
Twitterのブートストラップの実用例 NOT STICKY FOOTER
<script>
$(document).ready(function() {
var docHeight = $(window).height();
var footerHeight = $('#footer').height();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight)
$('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>
#footer
を持つ要素が少なくとも必要ですコンテンツが画面に収まる場合にスクロールバーが不要な場合は、10の値を0に変更します。
コンテンツが画面に収まらない場合は、スクロールバーが表示されます。
公式ページからこれを実装する方法は次のとおりです。
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
私は今ちょうどそれをテストしました、そして、それは素晴らしいです! :)
_ html _
<body>
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
</div>
<div id="Push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
</body>
関連する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 -30px;
}
/* Set the fixed height of the footer here */
#Push,
#footer {
height: 30px;
}
#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;
}
}
スティッキーフッター HTMLの基本的な スティッキーフッター には2つのDIV's
を使います。このように書く:
_ html _
<div class="container"></div>
<div class="footer"></div>
_ css _
body,html {
height:100%;
}
.container {
min-height:100%;
}
.footer {
height:40px;
margin-top:-40px;
}
もっと簡単な公式例: http://getbootstrap.com/examples/sticky-footer-navbar/ /
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
navbar-inner
とnavbar-fixed-bottom
の組み合わせが見つかりました
<div id="footer">
<div class="navbar navbar-inner navbar-fixed-bottom">
<p class="muted credit"><center>ver 1.0.1</center></p>
</div>
</div>
それはよさそうだし、私のために働く
の例を参照 Fiddle
これは私にとっては完璧に機能しました。
このクラスnavbar-fixed-bottomをフッターに追加してください。
<div class="footer navbar-fixed-bottom">
私はこのように使った:
<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>
そしてそれは全幅に渡って下に設定されます。
編集:これはフッターを常に見えるように設定します、それはあなたが考慮する必要があるものです。
HenryWの答え 私はそれが私が望む方法で動くようにするためにいくつかの調整が必要でしたが、良いです。特に次のものも処理します。
これが、私にとってこれらの調整でうまくいったことです。
HTML:
<div id="footer" class="invisible">My sweet footer</div>
CSS:
#footer {
padding-bottom: 30px;
}
JavaScript:
function setFooterStyle() {
var docHeight = $(window).height();
var footerHeight = $('#footer').outerHeight();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight) {
$('#footer').css('margin-top', (docHeight - footerTop) + 'px');
} else {
$('#footer').css('margin-top', '');
}
$('#footer').removeClass('invisible');
}
$(document).ready(function() {
setFooterStyle();
window.onresize = setFooterStyle;
});
スティッキーフッターを機能させるには、.container-fluid
divをラップする必要があります。また、.wrapper
クラスにはいくつかのプロパティがありません。これを試して:
以下のように、body
タグからpadding-top:70px
を削除し、代わりに.container-fluid
に含めます。
.wrapper > .container-fluid {
padding-top: 70px;
}
ナビゲーションバーを収めるためにbody
を押し下げると、ビューポートを超えてフッターがさらに(70px)押し上がるため、スクロールバーが表示されます。代わりに.container-fluid
divをプッシュすることでより良い結果が得られます。
次に、.wrapper
divの外側の.container-fluid
クラスを削除し、それで#main
divをラップする必要があります。
<div class="wrapper">
<div id="main" class="container-fluid">
<div class="row-fluid">...</div>
<div class="Push"></div>
</div>
</div>
もちろん、あなたのフッターは.wrapper
divから外れていなければならないので、それを `.wrapper divから取り除き、以下のように外側に配置します。
<div class="wrapper">
....
</div>
<footer class="container-fluid">
....
</footer><!--END .row-fluid-->
それが完了したら、次のように負の余白を使用して、フッターを.wrapper
クラスに適切に近づけます。
.wrapper {
min-height: 100%;
height: auto !important; /* ie7 fix */
height: 100%;
margin: 0 auto -43px;
}
.wrapper
クラスの高さをリセットするように、画面がリサイズされたときにうまくいくようにするには、おそらく他にもいくつか修正する必要があるでしょう。
@media (max-width:480px) {
.wrapper {
height:auto;
}
}
これはTwitter Bootstrapと新しいnavbar-fixed-bottomクラスでそれを実行するための正しい方法です。
CSS:
html {
position: relative;
min-height: 100%;
}
#content {
padding-bottom: 50px;
}
#footer .navbar{
position: absolute;
}
HTML:
<html>
<body>
<div id="content">...</div>
<div id="footer">
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Navbarコンポーネントを使用して、.navbar-fixed-bottomクラスを追加します。
<div class="navbar navbar-fixed-bottom"></div>
ボディを追加
{ padding-bottom: 70px; }
幅の制約レイアウトを処理するには、角が丸くならないように、またナビゲーションバーがアプリケーションの側面と同じ高さになるように次のようにします。
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="width-constraint clearfix">
<p class="pull-left muted credit">YourApp v1.0.0</p>
<p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
</div>
</div>
</div>
それからcssを使ってブートストラップクラスをオーバーライドして高さ、フォント、色を調整できます。
.navbar-fixed-bottom {
font-size: 12px;
line-height: 18px;
}
.navbar-fixed-bottom .navbar-inner {
min-height: 22px;
}
.navbar-fixed-bottom .p {
margin: 2px 0 2px;
}
これを処理するためにjQueryを使用できます。
$(function() {
/**
* Read the size of the window and reposition the footer at the bottom.
*/
var stickyFooter = function(){
var pageHeight = $('html').height();
var windowHeight = $(window).height();
var footerHeight = $('footer').outerHeight();
// A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
// and thus is outside of its container and counted in $('html').height().
var totalHeight = $('footer').hasClass('fixed-bottom') ?
pageHeight + footerHeight : pageHeight;
// If the window is larger than the content, fix the footer at the bottom.
if (windowHeight >= totalHeight) {
return $('footer').addClass('fixed-bottom');
} else {
// If the page content is larger than the window, the footer must move.
return $('footer').removeClass('fixed-bottom');
}
};
// Call when this script is first loaded.
window.onload = stickyFooter;
// Call again when the window is resized.
$(window).resize(function() {
stickyFooter();
});
});
Bootstrap 3.6.6
でテスト済み。
_ html _
<div class="container footer navbar-fixed-bottom">
<footer>
<!-- your footer content here -->
</footer>
</div>
_ css _
.footer {
bottom: 0;
position: absolute;
}
最も簡単な方法は、おそらくメインコンテナのdivにnavbar-static-bottom
を設定してBootstrap height: 100vh
を使うことです(新しいCSS3 ビューポートの割合 )。これはフッターを一番下までフラッシュします。
<main class="container" style="height: 100vh;">
some content
</main>
<footer class="navbar navbar-default navbar-static-bottom">
<div class="container">
<p class="navbar-text navbar-left">© Footer4U</p>
</div>
</footer>
Bootstrap 4.3の例 に従って、あなたが私のように正気を失っている場合、これは実際にどのように機能するかです:
height: 100%
(h-100
クラス)が必要ですdisplay: flex
(d-flex
クラス)が必要ですmargin-top: auto
(mt-auto
クラス)が必要です問題は、現代のフロントエンドフレームワークでは、これらの要素の周りに追加のラッパーがあることが多いことです。
たとえば、私の場合、Angularを使用して、個別のアプリルート、メインアプリコンポーネント、およびフッターコンポーネントからビューを構成しました。これらすべてがDOMにカスタム要素を追加しました。
そのため、これらのラッパー要素にクラスを追加する必要がありました:h-100
を追加し、d-flex
を1レベル下に移動し、mt-auto
をフッターから1レベル上に移動します(したがって、実際にはフッタークラスではなく、<app-footer>
カスタム要素にあります)。
私のために働いた唯一のもの!
html {
position: relative;
min-height: 100%;
padding-bottom:90px;
}
body {
margin-bottom: 90px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 90px;
}
Bootstrap 4に組み込まれているflexユーティリティを使ってください。これが私がほとんどBootstrap 4ユーティリティを使って思いついたものです。
<div class="d-flex flex-column" style="min-height: 100vh">
<header></header>
<div class="container flex-grow-1">
<div>Some Content</div>
</div>
<footer></footer>
</div>
.d-flex
.flex-column
min-height: 100vh
を指定します。.flex-grow-1
。#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}
フッターの高さは、wrap要素の一番下のインデントのサイズと一致します。
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}
複雑にしないでおく。
footer {
bottom: 0;
position: absolute;
}
フッターの高さに相当するmargin-bottom
をbody
に追加することによって、フッターの高さもオフセットする必要があるかもしれません。
これが、ブートストラップによる方法です。
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
単にページのソースを使うと見ることができるはずです。 <div id="wrap">
とthe topを忘れないでください。
これはcss3を使った例です:
CSS:
html, body {
height: 100%;
margin: 0;
}
#wrap {
padding: 10px;
min-height: -webkit-calc(100% - 100px); /* Chrome */
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: calc(100% - 100px); /* native */
}
.footer {
position: relative;
clear:both;
}
HTML:
<div id="wrap">
<div class="container clear-top">
body content....
</div>
</div>
<footer class="footer">
footer content....
</footer>
ここにあなたはHAML( http://haml.info )のアプローチを見つけるでしょう。
%body
#main{:role => "main"}
%header.navbar.navbar-fixed-top
%nav.navbar-inner
.container
/HEADER
.container
/BODY
%footer.navbar.navbar-fixed-bottom
.container
.row
/FOOTER
下のクラスを使用してページの最後の行にプッシュし、それを中央に配置します。 Ruby on RailsのHAMLページを使用している場合は、以下のコードを使用できます。 %footer.card.text-center
PlsはTwitterのブートストラップの使用を忘れないでください
これは、Flexboxを使用した最新バージョンのBootstrap(この記事の執筆時点では4.3)の解決策です。
HTML:
<div class="wrapper">
<div class="content">
<p>Content goes here</p>
</div>
</div>
<footer class="footer"></footer>
CSS:
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.wrapper {
flex-grow: 1;
}
そしてcodepenの例: https://codepen.io/tillytoby/pen/QPdomR
メディアクエリを使用するだけの、もう1つの解決策
@media screen and (min-width:1px) and (max-width:767px) {
.footer {
}
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
.footer{
bottom: 0;
width: 100%;
position: absolute;
}
}
@media screen and (min-width:992px) and (max-width:1199px) {
.footer{
bottom: 0;
width: 100%;
position: absolute;
}
}
@media screen and (min-width:1120px){
.footer{
bottom: 0;
width: 100%;
position: absolute;
}
}
height:100%
のチェーンがdiv#main
で壊れているようです。それにheight:100%
を追加してみてください。そうすれば、あなたはあなたのゴールに近づくでしょう。