web-dev-qa-db-ja.com

コンテンツの下にフッターがありますが、十分なコンテンツがない場合は空中に浮かんでいません

私はこのコードを手に入れました：

デモ： http://jsfiddle.net/z21nz89d/2/

HTML：

  <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
   </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
    <div class="container">
        <p>Here comes some content.</p>
        <p>Here comes some content.</p>
        <p>Here comes some content.</p>
        <p>Here comes some content.</p>
        <p>Here comes some content.</p>
    </div>
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <p>Some footer-content</p>
                    <p>Some footer-content</p>
                    <p>Some footer-content</p>
                </div>
                <div class="col-md-4">
                    <p>Some footer-content</p>
                    <p>Some footer-content</p>
                </div>
            </div>
        </div>
    </footer>

CSS：

footer {
    background-color: #eee;
    padding-top: 15px;
    padding-left: 15px;
}

それは私が持っているものの非常に基本的なものですが、あなたは要点を理解するでしょう。ご覧のとおり、フッターは空中のどこかに配置されています。私はそれを絶対的に配置して簡単に粘着性にすることができましたが、さまざまな理由でそれを望んでいません。

フッターをコンテンツ全体より下に配置したいのですが（いわば、最後にリストされています）、コンテンツが十分でない場合は、フッターを下：0、左：0に配置する必要があります。

私はこれをどのように達成するのか分かりません。私の最初の推測は、JavaScriptを使用して、スペースの量と、サイトがスクロール可能かどうかを確認することでした。

htmlcsstwitter-bootstrap-3footer
17
Philipp Meissner

これは、良いフッターを作成するために私が見つけた最も簡単な方法です。フッター以外のすべてを「ラッパー」divでラップします。次に、HTMLとボディの高さを100％に設定し、ラッパーの最小の高さを100％にします。次に、フッターと同じ高さの下部マージンと下部パディングをこのラッパーに与える必要があります。それは魅力のように機能します。

デモはこちら

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    margin-bottom: -100px;
    padding-bottom: 100px;
}
footer {
    height: 100px;
}
19
Tricky12

ここでフレックス位置を使用したソリューション： https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

6
mayrop

フッターの高さが不明の場合は、次の行にあるflexを使用するのが最適です。

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

そしてCSSの場合、これだけが必要です。

body { 
   display: flex;
   min-height: 100vh;
   flex-direction: column;
}
.content {
   flex: 1;
}

また、display：flexをbodyに設定する必要はありません。これは、body内のラッパーにすることもできます。

これはIE（下記のCanIUseリンクを参照）では期待どおりに機能しない可能性があることに注意してください）。

CanIUseリンク
例については、 このリンク を参照してください。

4
trainoasis

このレスポンシブcssコードを使用でき、すべてのブラウザーで機能し、ブラウザーのサイズを変更できる場合は、ブラウザーのサイズに応じて変更できます。

ライブ作業デモ

HTMLコード：

<div id="wrapper">

    <div id="header">
        Header is here
    </div><!-- #header -->

    <div id="content">
        Content is here
    </div><!-- #content -->

    <div id="footer">
        Footer is here
    </div><!-- #footer -->

</div><!-- #wrapper -->

CSSコード：

  html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    background:#ededed;
    padding:10px;
    text-align:center;
}
#content {
    padding-bottom:100px; /* Height of the footer element */
    text-align:center;
}
#footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
    text-align:center;
}

結果：

result

3
TechnicalKalsa

あなたが本当にそれをjavascriptの方法でやりたいのなら、あなたはこのコードでそれを達成することができます：

http://jsfiddle.net/z21nz89d/6/

$(function() {
    var windowHeight = $(window).height();
    var contHeight = $(".main-container").height();
    var footHeight = $("footer").height();
    var testHeight = windowHeight - footHeight;

    if (contHeight < testHeight) {
        $("footer").css("bottom", "0");
        $("footer").css("left", "0");
     }
});

次のcssルールを必ず追加してください。HTML、BODYのものは非常に重要です。

html, body {
   height: 100%;
   width: 100%;
   min-height: 100%;
   padding: 0;
   margin: 0;
}

また、たとえば「メインコンテナ」のクラスを持つdivのフッターを除くすべてのコンテキストをラップする必要があります。これにより、全身の高さとコンテンツの高さからフッターを引いたものをテストできます。 、 理解する？

それはすべてJSFiddleです。

これは実際にはこれを行う意味的な方法ではないことに注意してください。私の意見では、純粋なcssスティッキーフッターの方が良いでしょう。使用できない場合は、これで問題ありません。

2
Mike Legacy