web-dev-qa-db-ja.com

Bootstrap 4 Sticky Footer Not Sticking

スティッキーフッターがBootstrap 4で機能しない理由は、本当にわかりません。私は、初心者のTYPO3 Webサイトを持っています。

スティッキーフッターがページの下部に貼り付いていません。

レンダリングされたページソースのコピーを次に示します。

基本的に、htmlファイルをbootstraps docsフォルダーからコピーし、それを変更してTYPO3テンプレートにコピーしました。

ページをコンテンツで埋めると、フッターは貼り付きません。ページをスクロールして表示する必要があります。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Landing Page</title>
<meta name="generator" content="TYPO3 CMS">

<link rel="stylesheet" type="text/css"
        href="/typo3temp/assets/css/d42b6e1bdf.css?1507853162" media="all">
<link rel="stylesheet" type="text/css"
        href="/fileadmin/templates/landing_page/css/bootstrap.min.css?1507860230"
        media="all">
<link rel="stylesheet" type="text/css"
        href="/fileadmin/templates/landing_page/css/sticky-footer.css?1507861966"
        media="all">

<script
        src="/fileadmin/templates/landing_page/js/jquery-3.2.1.min.js?1507862465"
        type="text/javascript"></script>
<script
        src="/fileadmin/templates/landing_page/js/tether.min.js?1507862602"
        type="text/javascript"></script>
<script
        src="/fileadmin/templates/landing_page/js/bootstrap.min.js?1507854311"
        type="text/javascript"></script>

</head>
<body>
        <div class="container">
                <div class="mt-1">
                        <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>
                <p>
                        Use <a href="../sticky-footer-navbar">the sticky footer with a
                                fixed navbar</a> if need be, too.
                </p>
                <div class="row">
                        <div class="col">1 of 3</div>
                        <div class="col">1 of 3</div>
                        <div class="col">1 of 3</div>
                </div>
        </div>

        <footer class="footer">
                <div class="container">
                        <span class="text-muted">Place sticky footer content here.</span>
                </div>
        </footer>
</body>
</html>
htmlcsstypo3bootstrap-4sticky-footer
27
Daryn

なんとか理解できました。 「スティッキー」とは何かについて誤解しているかもしれませんが、解決策は絶対値を変更することでした-> cssファイルで修正されました。

例えばから：

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

に：

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}
37
Daryn

2018年更新-Bootstrap 4.0.0

Bootstrap 4.0はflexboxであるため、スティッキーフッターにflexboxを使用する方が簡単です。

<div class="d-flex flex-column sticky-footer-wrapper">
    <nav>
    </nav>
    <main class="flex-fill">
    </main>
    <footer>
    </footer>
</div>

body, .sticky-footer-wrapper {
   min-height:100vh;
}

.flex-fill {
   flex:1 1 auto;
}

デモ： ブートストラップ4スティッキーフッター （4.0.0）

注：flex-fillユーティリティクラスは 次のBootstrap 4.1に含まれます リリースになります。そのため、そのリリース後、フレックスフィル用の追加のCSSは不要になります。

参照： ブートストラップ4-スティッキーフッター-動的フッターの高さ

28
Zim

Bootstrap 4 docs の例には、次のCSSがあります。

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

おそらくhtml { position: relative; min-height: 100%; }を設定するのを忘れたでしょう-私は通常その部分を忘れていることを知っています。

26
Benjineer

Bootstrap 4では、 fixed-bottom クラスを使用してフッターを貼り付けます。カスタムCSSは必要ありません：

<footer class="footer fixed-bottom">
    ...
</footer>
11
shacker
<html class="h-100">
.
.
</html>

これで問題が解決するはずです。 Benjineer's answerに似ていますが、bootstrapクラスの準備ができています。 Bootstrap 4.3.1でテスト済み

2
Jigar