ブートストラップフッタ要素の位置の底面

私が作成したHTMLページ内に、フッターを追加したかったのです。私はブートストラップを利用していて、フッタ要素をコンテナ要素の中に（コンテナ要素の下の本体要素内に直接）置かずにフッター要素をページの下部に配置することができることが示されています（this example）。ブートストラップフッタ要素の位置の底面

私はこれを自分で試してみると、最初に要素が下に配置されているように見えます。しかし、私は他のページ（内容が長かったもの）に気づいたので、フッタはbody要素ではなくブラウザの一番下に現れ始めました。その効果は、フッターの上にあるコンテナ要素が、フッターが本体要素の底に向かうことなくフッターの後ろに表示されることです。

は私が作ったコードの次の例にスクロールするようにしてください：私は私のフッター要素が（ちょうどBootstrap example内の1つのように動作させるために何ができるか

.body { 
 
    overflow: scroll; 
 
    background-color: tomato; 
 
    /*The height is set so that an overflow: scroll; can happen, to reproduce 
 
    my sitation. When the content of the body tag is too long, the browser will 
 
    show a scroll bar and when scrolling down, the footer does not appear on the 
 
    bottom anymore but somewhere in the middle or maybe even top side, depending on 
 
    how long the body would become. */ 
 
    height: 300px; 
 
    position: relative; 
 
} 
 
.container { 
 
    background-color: yellow; 
 
    /*This would be a dynamic number, when removing this property. 
 
    If you do not really understand the idea I am talking about, try to change 
 
    this value and see for yourself what happens (with the footer element). 
 
    The height is set only for the sake of showing the issue. */ 
 
    height: 500px; 
 
} 
 
footer { 
 
    background: #e0f2f7; 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
}

<div class="body"> 
 
    <h2> 
 
    Foo 
 
    </h2> 
 
    <div class="container"> 
 
    asdasds 
 
    </div> 
 
    <footer>sadasdsa</footer> 
 
</div>

そのため、常に下部に固執します）、フッタ要素を特定のコンテナ要素に配置する必要はありませんか？

出典

2016-03-25 Barrosy

あなたの質問が正しく理解されている場合は、以下のような結果が得られますか？

ボディーの高さを300pxに設定しているからです。上部から300pxのフッターになりました。その行を削除しても問題ありません。

.body { 
 
    overflow: scroll; 
 
    background-color: tomato; 
 
    position: relative; 
 
} 
 
.container { 
 
    background-color: yellow; 
 
    /*This would be a dynamic number, when removing this property. 
 
    If you do not really understand the idea I am talking about, try to change 
 
    this value and see for yourself what happens (with the footer element). 
 
    The height is set only for the sake of showing the issue. */ 
 
    height: 500px; 
 
} 
 
footer { 
 
    background: #e0f2f7; 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
}

<div class="body"> 
 
    <h2> 
 
    Foo 
 
    </h2> 
 
    <div class="container"> 
 
    asdasds 
 
    </div> 
 
    <footer>sadasdsa</footer> 
 
</div>

出典

2016-03-25 09:23:26 Pimmol

は、オーバーフローのアイデアは動作しません。基本的には、ブラウザに（または）スクロールバーが表示されるようなコンテンツを含むbody要素があり、同様の状況が発生します。 – Barrosy

あなたはフッターは、サイトの一番下にはなく、コンテナの上にすべての時間を見えるようにしたい場合。 min-height：100％&の位置を追加する必要があります。 body要素には、フッターの高さの値をmargin-bottomに追加する必要があります。

html{ 
 
    min-height:100%; 
 
    position: relative; 
 
} 
 
body { 
 
    background-color: tomato; 
 
    margin:0 0 60px 0; 
 
    padding:0; 
 
} 
 
.container { 
 
    background-color: yellow; 
 
    height: 300px; 
 
} 
 
footer { 
 
    background: #e0f2f7; 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height:60px; 
 
}

<html> 
 
    <body> 
 
     <h2>Foo</h2> 
 
     <div class="container">asdasds</div> 
 
     <footer>sadasdsa</footer> 
 
    </body> 
 
</html>

編集1：

フッターの使用の動的な高さにしたい場合は（あなたはjQueryのを使用している場合）、これは

$(document).ready(function() { 
    var height = $('footer').height(); 
    $('body').css('margin-bottom',height + 'px'); 
});

出典

2016-03-25 09:37:40 Bonanza

固定マージンボトムなしでも可能ですか？それはフッターなので、内容が変わる可能性があります。それは私が考える別の問題を引き起こすだけです。 – Barrosy

もしあなたがフッターの動的な高さを望むなら、私はそれがJavascriptに必要と思うと思います。 – Bonanza

あなたは何を考えているのですか？お疲れ様でした。 – Barrosy

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Footer at bottom</title> 
 
    <style> 
 
.footer { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 20px; 
 
    background-color: #efefef; 
 
    text-align: center; 
 
} 
 
    </style> 
 
</head> 
 
<body> 
 
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div> 
 
</body> 
 
</html>

コードをJS

これは、uは、常にあなたは、単にナビゲーション要素にこのクラスを使用して、「ナビゲーションバーに固定されたボトム」を行うことができますページ

出典

2016-03-25 09:41:45 Manish62

私の例では全く同じコードがあります。追加コードは問題を再現するためのものです（表示が必要なページがブラウザの画面より長い場合はスクロールバーが表示されます）。スクロールした後はフッターが一番下には表示されません。 – Barrosy

ページの内容がブラウザの画面の高さを超えると、オフコースはページの下を見るために下にスクロールする必要があります。フッターはページの最後に残ります。 – Manish62

bodyクラスを含むdivタグはボディを表現し、何が起こっているかを表します。フッターが底にとどまらないので、私はこの質問をしました。 https://jsfiddle.net/zwwdngcf/ – Barrosy

の下部にフッターを保つことができる方法です。この例を試してみてください。それはあなたがこのページをチェックアウトすることができますどのように機能するかを知るために - あなたは私の例からの高さのプロパティを削除した場合http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-navbar.php

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Example of Bootstrap 3 Fixed Navbar</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<style type="text/css"> 
    body{ 
     padding-bottom: 70px; 
    } 
</style> 
</head> 
<body> 
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-bottom"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a href="#" class="navbar-brand">Brand</a> 
     </div> 
     <!-- Collection of nav links and other content for toggling --> 
     <div id="navbarCollapse" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Profile</a></li> 
       <li><a href="#">Messages</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Login</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 
<div class="container-fluid"> 
    <p style="line-height: 100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus. Tibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed.</p> 
</div> 
</body> 
</html>

出典

2016-03-25 10:50:49 Alex

あなたはそれがナビゲーション要素ではないことを知っています...？もちろん、意図していない状況でもクラスを使用できますが、例にはナビゲーションHTMLが多すぎます。 – Barrosy

ブートストラップフッタ要素の位置の底面

答えて

関連する問題