Twitter Bootstrap 3 Yapışkan Altbilgi

204

Ben uzun süredir twitter bootstrap çerçevesini kullanıyorum ve son zamanlarda sürüm 3'e güncellendi!

Ben alt yapışmasını yapışkan altbilgi alma konusunda sorun yaşıyorum, twitter bootstrap web sitesi tarafından sağlanan başlangıç ​​şablonu kullandım, ama yine de şans, herhangi bir fikir?

html  css  twitter-bootstrap  twitter-bootstrap-3 
— Brad Fletcher
kaynak
31
— ptim
3
@memeLab resmi örnekte neden vücut kenar boşluğu hakkında bir şey yok: -60px? Yoksa özledim mi?
— Ganders
Yapışkan altbilgi için değişken yüksekliğe izin veren yalnızca CSS çözümü eklendi . Buraya, yeni yanıt olarak, sayfanın alt kısmında olduğu gibi bağlandı.
— tao

Yanıtlar:

193

alt çubuğunuza navbar sabit alt sınıfını eklemeniz yeterlidir.

<div class="footer navbar-fixed-bottom">
— Jon
kaynak
32
bu yapışkan altbilgi ile aynı değil
— Yura Omelchuk
3
Üstbilgi ve altbilginiz varsa, mobil bir cihazda çok fazla alan kaybedersiniz.
— strattonn
4
@strattonn medya sorgularının ne için olduğunu
— Jacob Raccuia
20
Sayfanın kaydırmaya ihtiyacı yoksa bu mükemmel çalışır. Ancak altbilgi, sayfada daha fazla içerikle çakışıyor. Bu konuda herhangi bir geçici çözüm var mı? Teşekkürler!
— Xplora
1
çakışma sorunundan emin değilsiniz, ancak kenar boşluğu / dolgu eklemek sorunu çözmüyor mu?
— Jon
152

Resmi Boostrap3 yapışkan altbilgi örneğine bakıldığında, eklemeye gerek yoktur <div id="push"></div>ve CSS daha basittir.

Resmi örnekte kullanılan 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;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

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

ve temel HTML:

<body>

    <!-- Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">

      </div>
    </div>

    <div id="footer">
      <div class="container">

      </div>
    </div>
</body>

Bu css bağlantısını yapışkan altbilgi örneğinin kaynak kodunda bulabilirsiniz.

<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">

Tam URL: http://getbootstrap.com/examples/sticky-footer/sticky-footer.css

— tkymtk
kaynak
21
Resmi yapışkan altbilgi örneğindeki HTML ve CSS artık burada açıklanandan oldukça farklıdır, örneğin artık 'wrap' div kullanılmamaktadır.
— IanB
52

Aşağıda, Bootstrap'te bulunandan başka ek CSS veya Javascript gerektirmeyen ve mevcut altbilginize müdahale etmeyen yapışkan bir altbilgi ekleyecek bir yöntem.

Burada örnek: Kolay Yapışkan Altbilgi

Sadece kopyalayıp doğrudan kodunuza yapıştırın. Telaş yok telaş yok.

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
      </p>

      <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
    </div>
</div>
— anataliocs
kaynak
4
Çok güzel ve hızlı. Duyarlı da olabilir. Ancak, sayfa içeriğinin altına altbilgi tarafından gizlenmemesi için ek alan eklemeye ihtiyaç vardır. Boşluk, altbilgi yüksekliğine eşit yüksekliğe sahip olmalıdır. Bunu en iyi nasıl yapacağınızı gösterebilir misiniz? BTW "herhangi bir CSS gerektirmez" teknik olarak yanlıştır. O olmalı "Bootstrap sınıfları dışındaki herhangi bir ek CSS gerektirmez" .
— ADTC
1
Bunun bootstrap'ta mevcut olanı güçlendirdiğini seviyorum. Diğer en iyi cevapları işe yarayamadım ama bunu sayfama ve yapışkan altbilgiye bam yapıştırarak. Teşekkürler!
— haakon.io
34

Yeni eklediğiniz CSS'ye ek olarak , wrap div'i kapatmadan önce push div eklemeniz gerektiğini unutmayın.

HTML için temel yapı 

<div id="wrap"> 
    page content here 
    <div id="push"></div>
</div> <!-- end wrap -->

<div id="footer">
    footer content here
</div> <!-- end footer -->

Canlı görüntü Görünümü
düzenle

— David Taiaroa
kaynak
Sayfa içeriği mevcut ekrandan daha büyükse, altbilgi aşağı itilir. Altbilginin gerçekten dibe yapışmasını istiyorum (navbar sabit alt gibi)
— blueFast
hey @delavnog, böyle bir şey sizin için işe yarar mı? codepen.io/panchroma/pen/wMXWpY . Sizin için tek önemli bit 647 satırındaki HTML ve CSS
— David Taiaroa
@delavnog, sayfadaki minimal içerikle aynı fikir codepen.io/panchroma/pen/JGZKqy
— David
Teşekkürler, bu harika! Şimdi, ana div'ı nav ve footer arasında dikey olarak ortalayabilirsem, bu harika olurdu! Kodunuzu düzenledi: codepen.io/anon/pen/rxKMaW (Vücudun kenar boşluğu eklemem gerekiyordu, çünkü nav içeriğin en üstünü yiyor)
— blueFast
@delavnog, ana gövde çok yüksek değilse bir başlangıç. Daha uzun içerik için daha fazla iş gerekir: codepen.io/panchroma/pen/vLrXMq
— David
30

İşte bugün itibariyle Sabit Altbilgi basitleştirilmiş kodu , çünkü her zaman optimize ediyorlar ve bu İYİ:

HTML

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-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 class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer with fixed navbar</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. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer>
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>

  </body>
</html>

CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
— Leniel Maccaferri
kaynak
1
Mükemmel çözüm. Aradığım şey buydu.
— Levimatt
1
Ne yazık ki bu altbilginin boyutu sabittir. Bazen, altbilgi dinamik olduğunda css'deki yüksekliğinden daha büyük veya daha küçük olabilir.
— 23W
27

Ben biraz geç konuda değilim ama sadece bu soruya tarafından ısırılmış ve nihayet, sadece kullanmak atlatmak gerçekten çok kolay bir yol buldum gibi ben bu yazı geldi navbarile navbar-fixed-bottomsınıfının sağladı. Örneğin:

<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <span class="navbar-text">
      Something useful
    </span>
  </div>
</div>

HTH

— iMil
kaynak
Bu arada akıllı bir cevap olan cevabınızın sadeliğini ve etkinliğini seviyorum. Aynı konuya birçok cevap jquery ve karmaşık şeylerle doludur. Teşekkürler dostum.
— digitai
1
Yarım çözüm olsa da, yeniden boyutlandırırsanız sayfanızdaki içeriğin çakışmasına dikkat etmeniz gerekir.
— Baldráni
@ Baldráni Hayır, tam bir çözümdür, altbilgi html'sinde Bootstrap satırı ve col kullanırsanız çakışmalar iyi çalışır (yine de yapmanız gereken şey budur)
— Tino Mclaren
Bu yapışkan bir altbilgi değil. Yalnızca gezinme çubuğu içeriği için uygun olan sabit bir alt gezinme çubuğudur ve sayfa içeriğiyle çakışır.
— Zim
10

İşte bu sorunun güncellenmiş çözümü. 

 /* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}


body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;

  border-top: 1px solid #eee;
  text-align: center;
}

.site-footer-links {
  font-size: 12px;
  line-height: 1.5;
  color: #777;
  padding-top: 20px;
  display: block;
  text-align: center;
  float: center;
  margin: 0;
  list-style: none;
}

Ve şu şekilde kullanın: 

<div class="footer">
 <div class="site-footer">
  <ul class="site-footer-links">
        <li>© Zee and Company<span></span></li>
  </ul>
 </div>

</div>

Veya 

html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}
— Z harfi
kaynak
4
Bu iyi bir çözüm değildir, çünkü altbilginiz sabittir, yani sayfa içeriğiyle (varsa) çakışır. some text<br>Altbilgiden önce birkaç satır eklemeyi ve pencereyi küçültmeyi deneyin .
— jmarceli
@ user2041318: evet bu korkunç ... bunu gösterdiğin için teşekkürler.
— Sebastian
Bu jmarceli yoruma göre düzeltilmiştir. Altbilgi artık sabit değil.
— zee
3

Yapışkan örnek benim için çalışmıyor. Çözümüm:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}
— Andi Giga
kaynak
Basit, iyi eski moda CSS. İş bitmiş. Bazı yüksek puanlı cevapların ne kadar kıvrımlı olduğunu eğlenceli buluyorum. Bootstrap'ın hayatımızı kolaylaştırması gerekmez mi? $$
— Kal
2

İtme divhemen içinde olmalı wrap, içinde DEĞİL .. tıpkı bunun gibi 

<div id="wrap">
  *content goes here*
</div>

<div id="push">
</div>

<div id="footer">
  <div class="container credit">
  </div>
  <div class="container">
    <p class="muted credit">© Your Page 2013</p>
  </div>
</div>
— Joseph
kaynak
2

OP tarafından cevaplandı:

Bunu CSS dosyanıza ekleyin.

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: #eee;
}

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

Esnek bir yapışkan altbilgi istedim , bu yüzden buraya geldim. En iyi cevaplar beni doğru yöne getirdi.

Mevcut (2 Ekim 16) Bootstrap 3 css Yapışkan altbilgi (Sabit boyut) şöyle görünür:

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

Altbilgi sabit bir boyuta sahip olduğu sürece, gövde kenar boşluğu, altbilginin oturması için bir cep oluşturmak için bir itme oluşturur. Bu durumda, her ikisi de 60 piksele ayarlanır. Ancak, altbilgi sabit değilse ve 60 piksel yüksekliğini aşarsa, sayfa içeriğinizi kapsayacaktır.

Esnek Yap: css gövde kenar boşluğunu ve altbilgi yüksekliğini silin. Daha sonra altbilgi yüksekliğini almak ve gövde marginBottom'unu ayarlamak için JavaScript ekleyin. Setfooter () işlevi ile yapılır. Ardından, sayfanın ilk yüklendiği zaman ve setfooter'ı çalıştıran yeniden boyutlandırıldığında olay dinleyicileri ekleyin. Not: Altbilginizde bir akordeon veya pencerenin yeniden boyutlandırılmadan boyut değişikliğini tetikleyen başka bir şey varsa, setfooter () işlevini tekrar çağırmanız gerekir.

Parçacığı çalıştırın ve sonra tam ekran demo.

function setfooter(){
	var ht = document.getElementById("footer").scrollHeight;
	document.body.style.marginBottom = ht + "px";
}

window.addEventListener('resize', function(){
		setfooter();
	}, true);
window.addEventListener('load', function(){
	setfooter();
}, true);
html {
  position: relative;
  min-height: 100%;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  
  /* additional style for effect only */
   text-align: center;
    background-color: #333;
    color: #fff;
}
  


body{
/* additional style for effect only not needed in bootstrap*/
  padding:0;
  margin: 0;
  }
<div>
  Page content
  <br>  <br>
  line 3
  <br>  <br>
  line 5
  <br>  <br>
  line 7
  
 </div>


<footer id="footer" class="footer">
      <div class="container">
        <p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p>
      </div>
    </footer>
Snippet'i genişlet

— Sterner
kaynak
2

Basit js

if ($(document).height() <= $(window).height()) {
    $("footer").addClass("navbar-fixed-bottom");
}

Güncelleme # 1

$(window).on('resize', function() {
    $('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
— fdrv
kaynak
1

Tüm bunları özetlemek için, aklınızda altbilgi hariç her şeyin min-height: 100%veya daha azının olması gereken bir şey olduğunu unutmayın .

— kshirish
kaynak
1

Ben LESS kullanarak dolgu ile basitleştirilmiş yapışkan altbilgi kodumu yazıyorum. Bu yanıt muhtemelen konu dışıdır, çünkü soru dolgu hakkında konuşmaz, bu yüzden ilgileniyorsanız daha fazla ayrıntı için bu yayını kontrol edin .

@footer-padding:      40px;  // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)

/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;

html {
 position: relative;
 min-height: 100%;
}
body {
 /* This avoids footer to overlap the page content */
 margin-bottom: @footer-height;
}
footer{
 /* Fix the footer on bottom and give it fixed height */
 position: absolute;
 bottom: 0;
 width: 100%;
 height: @footer-height;
 padding: @footer-padding 0;
}
— Fred K
kaynak
1

Jek-fdrv'nin cevabına dayanarak, .on('resize', function()her cihazda ve her çözünürlükte çalıştığından emin olmak için bir ekledim :

$(window).on('resize', function() {
    if ($(document).height() <= $(window).height()) {
        $('footer').addClass("navbar-fixed-bottom");
    } else {
        $('footer').removeClass("navbar-fixed-bottom");
    }
});
— iamchriswick
kaynak
1

Bootstrap'ın geçerli sürümü artık bu işlev için çalışmıyor gibi görünüyor. Yapışkan altbilgi-navbar örneğini indirir ve ana gövde alanına büyük miktarda içerik yerleştirirseniz, altbilgi görünüm alanının altından aşağıya doğru itilir. Hiç yapışkan değil.

— CJ Catalano
kaynak
1

İşte tamamen duyarlı değişken yükseklikte yapışkan altbilgi için CSS tabanlı bir çözüm.
Avantajı: altbilgi değişken yüksekliğe izin verir, çünkü yüksekliğin artık CSS'de sabit kodlanması gerekmez.

Kod snippet'ini göster

Ve işte öneksiz SCSS( gulp/ için grunt):

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > * {
    flex-grow: 0;
  }
  > nav + .container {
    flex-grow: 1;
  }
}
— tao
kaynak
1

Sadece flex kullanın! HTML'nizde gövde ve ana öğeyi kullandığınızdan emin olun ve en iyi çözümlerden biridir (IE9 desteğine ihtiyacınız yoksa). Sabit bir yükseklik veya benzerlik gerektirmez.

Materialize için de tavsiye edilir!

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

main {
    flex: 1 0 auto;
}
— Kentor
kaynak
0

Haml & Sass, gerekli olan her şeyi söyler:

İçin Haml app/view/layouts/application.html.haml

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

İçin Sass app/assets/stylesheets/application.css.sass

$footer-height: 110px

html
  position: relative
  min-height: 100%

body
  margin-bottom: $footer-height

body > footer
  position: absolute
  bottom: 0
  width: 100%
  height: $footer-height

dayalı http://getbootstrap.com/examples/sticky-footer-navbar/

— equivalent8
kaynak
0

Eğer altbilgi için sınıflarda bootstrap build kullanmak istiyorsanız. Ayrıca bazı javascript yazmalısınız:

$(document).ready(function(){
  $.fn.resize_footer();

  $(window).resize(function() {
    $.fn.resize_footer();
  });
 });

(function($) {

  $.fn.resize_footer = function(){
    $('body > .container-fluid').css('padding-bottom', $('body > footer').height());
  };
 });

İçeriğin sabit altbilgiyle çakışmasını önler padding-bottomve kullanıcının pencere / ekran boyutunu ne zaman değiştireceğini ayarlar .

Yukarıdaki kodda, altbilginin doğrudan vücut etiketinin içine yerleştirildiğini varsaydım:

<body>
  ... content of your page ...
  <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <div class="muted pull-right">
        Something useful
      </div>
      ... some other footer content ...
    </div>
  </div>
</body>

Bu kesinlikle en iyi çözüm değildir (kaçınılabilecek JS nedeniyle), ancak üst üste binmeyle ilgili herhangi bir sorun olmadan çalışır, uygulanması ve duyarlı olması kolaydır ( heightCSS'de sabit kodlanmamıştır).

— jmarceli
kaynak
0 

#myfooter{
height: 3em;
  background-color: #f5f5f5;
  text-align: center;
  padding-top: 1em;
}
<footer>
    <div class="footer">
        <div class="container-fluid"  id="myfooter">
            <div class="row">
                <div class="col-md-12">
                    <p class="copy">Copyright &copy; Your words</p>
                </div>
            </div>
        </div>
    </div>
</footer>
Snippet'i genişlet

— Gpak
kaynak
Bu alt kısım nasıl yapışkan?
— Sebastian
0

İşte önyüklemede kullanabileceğiniz çok basit ve temiz bir yapışkan altbilgi. Tamamen Duyarlı!

HTML

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="">
      </a>
    </div>
  </div>
</nav>
    <footer></footer>
</body>
</html>

CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: red;
}

Misal: CodePen Demosu

— Gothburz
kaynak
Bu çözüm, mutlak konumlandırma nedeniyle önyükleme modunu açarken altbilgi çubuğunu sağa kaydırır!
— 16:58, thethakuri
0

CSS hileleriyleflexbox bulduğum en kolay yol kullanmak . Bu gerçek yapışkan altbilgidir, içerik sayfanın <% 100'ü ve sayfanın>% 100'ü olduğunda çalışır:

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

Ve CSS:

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

Bunun bootstrap-agnostik olduğunu unutmayın, bu yüzden bootstrap ile ve onsuz çalışır.

— bustawin
kaynak
0

Altbilgi gezinme çubuğunuza bir sınıf eklemeyi deneyebilirsiniz:

navbar-fixed-bottom

Sonra custom.css ve body padding adında bir CSS oluşturun .

body { padding-bottom: 70px; }
— Ikram - Ud - Daula
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.