Bootstrap 3 Altbilgiyi alta doğru yıkayın. sabit değil


177

Tasarımını yaptığım bir site için Bootstrap 3 kullanıyorum.

Bu örnek gibi bir altbilgiye sahip olmak istiyorum. Örneklem

SABİT istemediğimi lütfen unutmayın, bu yüzden bootstrap navbar sabit alt benim sorunumu çözmez. Sadece her zaman içeriğin altında olmasını ve aynı zamanda duyarlı olmasını istiyorum.

Herhangi bir rehber çok takdir edilecektir.


DÜZENLE:

Açık olmasaydım üzgünüm. Şimdi olan şey, içerik gövdesinin yeterli içeriğe sahip olmamasıdır. Altbilgim yukarı taşınıyor ve altta boş bir alan bırakıyor.

Navbar'ım için sahip olduğum şey bu

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}

Üzerinde çalıştığınız ve size sorun çıkaran bir örnek kodunuz var mı?
badAdviceGuy

Normal altbilgi gibi görünüyor, Sabit istemiyorsanız stili güncelleyebilirsiniz. Hangi sorunla karşılaşıyorsunuz?
Mutant

HTML'nizdeki son şey olduğunda, her zaman en altta olacaktır. Sorunun ne olduğunu anlamak için bir kod örneğine ihtiyaç duyan kafa karıştırıcı soru.
Joe Conlin


@davidpauljunior: Aradığım şey olmayan yapışkan altbilgiler
user3169403

Yanıtlar:


124

Aşağıdaki örneğe bakın. Bu, sayfa daha az içeriğe sahipse Altbilginizi alta gelecek şekilde konumlandırır ve daha fazla içeriğe sahipse normal bir altbilgi gibi davranır.

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

HTML

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>

GÜNCELLEME : Bootstrap'ın yeni sürümü, bir sarmalayıcı eklemeden yapışkan altbilginin nasıl ekleneceğini gösterir. Daha fazla bilgi için lütfen Jboy Flaga'nın Cevabına bakınız.


Bağlantılarınız koptu
Halter

2
Paketleyicide neden iki yükseklik özelliği tanımı var?
HardlyNoticeable

@HardlyNoticeable, içeriği daha az olsa bile sargıyı zorlamak için minimum genişliktedir.
Surjith SM

Hala neden iki yükseklik özelliği tanımı olduğunu merak ediyorum. @SurjithSM
Erowlin

@Erowlin Bu bir hata. iki yükseklik özelliğine ihtiyacınız yok. Sadece min-yükseklik yeterli olacak, cevabı düzenledi.
Surjith SM

316

Burada bootstrap'tan basitleştirilmiş bir çözüm var (yeni bir sınıf oluşturmanıza gerek yok): http://getbootstrap.com/examples/sticky-footer-navbar/

Bu sayfayı açtığınızda, bir tarayıcıyı ve "Kaynağı Görüntüle" yi sağ tıklayın ve yapışkan altbilgi-navbar.css dosyasını açın ( http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar. css )

sadece bu CSS'ye ihtiyacınız olduğunu görebilirsiniz

/* 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;
}

bu HTML için

<html>
    ...
    <body>
        <!-- Begin page content -->
        <div class="container">
        </div>
        ...

        <footer class="footer">
        </footer>
    </body>
</html>

19
Bu (Bootstrap dokümanlarından / örneklerinden) kabul edilen cevap olmalıdır.
richardm

5
Benim için bu işe yaramıyor çünkü altbilgim oldukça uzun. Sadece bir paragraf istiyorsanız harika ama benimki birkaç sütun var - bu yöntemi kullanarak, daha küçük boyutlara
indiğimde

9
Bu Bootstraps yapışkan altbilgi çözümü değil mi? OP'nin bunu kastettiğini sanmıyorum. Benim için, uzun bir sayfayla altbilgim ekranın altında belirdi, ancak içeriğin altında görünmedi (yani içeriğin üzerinde). Konumu değiştirmek zorunda kaldım: mutlak; bunun için göreceli (.footer sınıfında).
Tino Mclaren

24
Bu konuda başlıkta "sabit değil" olsaydı doğru cevap olurdu ...
kaba

1
Bu sadece sabit boyutlu altbilgiler için işe yarar, ben süper ince ve altbilginin yüksekliğinden bağımsız
@ChristopherTan

16

flexbox'ı elinizin altında kullanabilirsiniz. Bootstrap 4 tarafından sunulan çözüm hala duyarlı düzende örtüşen içeriği avlıyor, örneğin: mobil görünümde kırılacak, en düzgün hile burada gösterilen flexbox çözüm demosunu kullanmaktır :( https://philipwalton.github.io / flex-by-box / demos / yapışkan altbilgi / ) bu şekilde artık kullanılmayan bir çözüm olan sabit yükseklik sorunuyla uğraşmak zorunda kalmıyoruz ... bu çözüm, hangisini kullanırsanız kullanın, bootstrap 3 ve 4 için çalışır.

<body class="Site">
  <header></header>
  <main class="Site-content"></main>
  <footer></footer>
</body>

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

.Site-content {
  flex: 1;
}

1
Bu çok zekice bir çözüm. CSS'nin bundan en iyi şekilde nasıl yararlanacağımızı bile bilmediğim kadar çok şey olduğunu düşünüyorum.
Gilbert

2
Bu çözümü seviyorum. İnanılmaz.
Bagus Aji Santoso

14

GÜNCELLEME: Bu soruya bütünüyle doğrudan cevap vermez, ancak diğerleri bunu faydalı bulabilir.

Duyarlı altbilginizin HTML'si budur

<footer class="footer navbar-fixed-bottom">
     <div class="container">
     </div>
</footer>

CSS için

footer{
    width:100%;
    min-height:100px;    
    background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */
}

NOT: Bu sorunun gönderilmesi sırasında yukarıdaki kod satırları altbilgiyi sayfa içeriğinin altına itmez; ancak sayfada çok az içerik olduğunda altbilginizin sayfa ortasında taranmasını önler. Altbilgiyi sayfa içeriğinin altına iten bir örnek için buraya bakın http://getbootstrap.com/examples/sticky-footer/


Altbilgi tanıştıklarında ana içeriği kapsadığı için bu aslında kötü bir çözümdür. padding-bottomAna içerik kabını altbilginin yüksekliğine eşit olarak ayarlamanız gerekir . Ve bunu sayfa loadve resizeetkinliklerde ve ayrıca altbilgide dinamik olarak yapmanız gerekir DOMSubtreeModified.
tao

9

Hala mücadele eden insanlar ve cevaplanan çözüm istediğiniz gibi çalışmıyorsa, işte bulduğum en basit çözüm.

Ana içeriğinizi sarın ve minimum görüntüleme yüksekliği atayın. 60'ı tarzınızın ihtiyaç duyduğu değere ayarlayın.

<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>

Bu ve oldukça iyi çalışıyor.


Söz konusu ile aynı konuya sahiptim. Hemen hemen tüm yüksek dereceli cevapları denedikten sonra, bu benim için çalışan tek cevaptı. Ve her boyutta çalıştı. Sadece yaptığım değişiklik "min-yükseklik: 70vh" idi. Bu, sitenizin üstbilgi ve altbilgi boyutlarına bağlı olacaktır.
Arfath

Bu daha yüksek olmalı, tam istendiği gibi çalışıyor.
yam

Bu benim ihtiyaçlarım için çalıştı. İstenen sonucu elde edene kadar minimum yükseklik değerini değiştirin.
sawyerrken

Harika, bu altbilgi yerleştirme sorununa en basit ve etkili çözüm!
Prahlad Yeri

5

Galen Gidman, sabit bir yüksekliği olmayan duyarlı bir yapışkan altbilgi sorununa gerçekten iyi bir çözüm gönderdi. Tam çözümünü blogunda bulabilirsiniz: http://galengidman.com/2014/03/25/responsive-f Flexible-height-sticky-footers-in-css/

HTML

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS

html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%; }

Bu önyükleme ile uyumlu gibi görünüyor ve bu nedenle kabul edilen cevap imho olmalıdır. Mükemmel değil, çünkü yatay bir kaydırma çubuğu görünüyor.
Florian Mertens

Florian: Benim için yatay kaydırma çubuğu yok.
HardlyNoticeable

4

Saf bir CSS çözümü için 2. işlemden sonra kaydırın <hr>. Birincisi ilk cevaptır (2016'da geri verilir)


Yukarıdaki çözümlerin en büyük kusuru , altbilgi için sabit bir yüksekliğe sahip olmalarıdır .
Ve bu, insanların milyonlarca cihaz kullandıkları ve en azından beklediğinizde onları döndürme ve ** Poof! ** sayfa içeriğiniz altbilginin arkasına gider!

Gerçek dünyada, altbilginin yüksekliğini hesaplayan ve sayfa içeriğinin padding-bottombu yüksekliğe uyum sağlayacak şekilde dinamik olarak ayarlandığı bir işleve ihtiyacınız vardır . Ve bu küçük işlevi sayfa loadve resizeetkinliklerin yanı sıra altbilgide de çalıştırmanız gerekir DOMSubtreeModified(altbilginizin eşzamansız olarak dinamik olarak güncellenmesi veya etkileşime girdiğinde boyutu değiştiren animasyonlu öğeler içermesi durumunda).

İşte jQuery v3.0.0ve Bootstrap kullanan bir kavram kanıtı v4-alpha, ancak her birinin alt sürümlerinde çalışmaması için hiçbir neden yok.

Başlangıçta, bu çözümü burada yayınladım, ancak bu soru altında yayınlanırsa daha fazla insana yardımcı olabileceğini fark ettim.

Not: Ben kasıtlı sarılmış olan $([selector]).accomodateFooter()herhangi DOM öğesindeki çalıştırılabilir böylece en düzenlerinde değil gibi bir jQuery eklentisi olarak $('body')'s bottom-paddingayarlayarak bu ihtiyaçları, fakat elemanın sarıcı bazı sayfa position:relative(genellikle hemen üst footer) .


Daha sonra düzenleme (ilk yanıttan 3+ yıl sonra):

Bu noktada, sayfanın alt kısmına dinamik bir içerik altbilgisi yerleştirmek için JavaScript'i kullanmayı kabul etmiyorum. Flexbox, şimşek hızında, çapraz tarayıcı kullanılarak tek başına CSS ile elde edilebilir.

İşte burada:


3

Bu yöntem minimum biçimlendirme kullanır. Tüm içeriğinizi altbilgi yüksekliğine eşit bir dolgu tabanı ve negatif kenar boşluğu tabanı olan bir .wrapper'a koyun (örneğimde 100 piksel).

html, body {
    height: 100%;
}

/* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */

.wrapper {
    min-height: 100%;
    height: auto;
    margin: 0 auto -100px;
    padding-bottom: 100px;
}
.footer {
    height: 100px;
}

<body>

<div class="wrapper">
  <p>Your website content here.</p>
</div>
<div class="footer">
   <p>Copyright (c) 2014</p>
</div>

</body>

2

Veya bu

<footer class="navbar navbar-default navbar-fixed-bottom">
    <p class="text-muted" align="center">This is a footer</p>
</footer>

1

Bootstrap için:

<div class="navbar-fixed-bottom row-fluid">
  <div class="navbar-inner">
    <div class="container">
      Text
    </div>
  </div>
</div>

2
Soru özellikle navbar-fixed-bottomsorunu çözen şeyin DEĞİL olduğunu belirtir .
p4sh4

1

Bu çözümlerin hiçbiri benim için tam olarak işe yaramadı çünkü altbilgimde navbar-ters sınıf kullandım. Ama çalışan ve Javascript içermeyen bir çözüm aldım. Medya sorgularının oluşturulmasına yardımcı olmak için Chrome kullanıldı. Ekran yeniden boyutlandırıldığında altbilginin yüksekliği değişir, bu nedenle buna dikkat etmeniz ve buna göre ayar yapmanız gerekir. Altbilgi içeriğiniz (içeriğimi tanımlamak için id = "altbilgi" ayarladım) altta tutmak için postion = absolute ve bottom = 0 kullanmalıdır. Ayrıca genişlik:% 100. İşte medya sorguları olan CSS'im. Min. Genişlik ve maks. Genişliği ayarlamanız ve bazı öğeler eklemeniz veya kaldırmanız gerekir:

#footer {
  position: absolute;
  color:  #ffffff;
  width: 100%;
  bottom: 0; 
}
@media only screen and (min-width:1px) and (max-width: 407px)  {
    body {
        margin-bottom: 275px;
    }

    #footer {
        height: 270px; 
    }
}
@media only screen and (min-width:408px) and (max-width: 768px)  {
    body {
        margin-bottom: 245px;
    }

    #footer {
        height: 240px; 
    }
}
@media only screen and (min-width:769px)   {
    body {
        margin-bottom: 125px;
    }

    #footer {
        height: 120px; 
    }
}

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.