Twitter Bootstrap 3 Sticky Footer

204

Od dłuższego czasu używam frameworka bootstrap, który ostatnio zaktualizował się do wersji 3!

Mam problem z przyklejeniem stopki do dołu, skorzystałem z szablonu startowego dostarczonego przez stronę startową Twittera, ale nadal nie masz szczęścia, jakieś pomysły?

html css twitter-bootstrap twitter-bootstrap-3 Brad Fletcher
źródło
31
oficjalny przykład: getbootstrap.com/examples/sticky-footer-navbar
ptim 10.10.2013
3
@memeLab dlaczego oficjalny przykład nie ma nic na temat marginesów ciała: -60px? A może tęskniłem ...?
ganders
Dodano rozwiązanie tylko CSS umożliwiające zmienną wysokość dla lepkiej stopki. Połączyłem go tutaj, ponieważ jako nowa odpowiedź znajduje się na dole strony.
tao

Odpowiedzi:

193

po prostu dodaj stopkę do paska nawigacyjnego klasy.

<div class="footer navbar-fixed-bottom">
Jon
źródło
32
to nie to samo co lepka stopka
Yura Omelchuk
3
Jeśli masz nagłówek i stopkę, tracisz za dużo miejsca na urządzeniu mobilnym.
strattonn
4
@strattonn do tego służą zapytania mediów
Jacob Raccuia,
20
Działa to doskonale, jeśli strona nie potrzebuje przewijania. Ale stopka pokrywa się z większą zawartością strony. Jakieś obejście tego? Dzięki!
Xplora,
1
nie jesteś pewien problemu nakładania się, ale czy dodanie marginesu / wypełnienia nie rozwiązuje problemu?
Jon
152

Nawiązując do oficjalnego przykładu lepkiej stopki Boostrap3, nie trzeba dodawać <div id="push"></div>, a CSS jest prostszy.

CSS użyty w oficjalnym przykładzie to:

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

i niezbędny 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>

Link do tego css można znaleźć w kodzie źródłowym przykładu lepkiej stopki .

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

Pełny adres URL: http://getbootstrap.com/examples/sticky-footer/sticky-footer.css

tkymtk
źródło
21
HTML i CSS w oficjalnym przykładzie lepkiej stopki różni się teraz znacznie od tego, co tu opisano, np. Nie jest już używany div zawijania.
IanB
52

Oto metoda, która doda lepką stopkę, która nie wymaga żadnego dodatkowego CSS lub Javascript innego niż to, co jest już w Bootstrap i nie będzie kolidować z twoją bieżącą stopką.

Przykład tutaj: Easy Sticky Footer

Po prostu skopiuj i wklej to bezpośrednio do swojego kodu. Bez problemu.

<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>
anatalioki
źródło
4
Bardzo miło i szybko. Może być również responsywny. Konieczne jest jednak dodanie dodatkowej przestrzeni u dołu zawartości strony, aby nie była ona ukryta przez stopkę. Przestrzeń powinna mieć wysokość równą wysokości stopki. Czy możesz pokazać, jak najlepiej to zrobić? BTW „nie wymaga CSS” jest technicznie niepoprawne. Powinno być „nie wymaga żadnych dodatkowych CSS poza klasami Bootstrap” .
ADTC
1
Uwielbiam to, że wykorzystuje to, co istnieje w bootstrap. Nie mogłem zmusić innych najlepszych odpowiedzi do działania, ale wkleiłem to na mojej stronie i bam, lepka stopka. Dzięki!
haakon.io
34

Oprócz dodanego właśnie CSS pamiętaj, że musisz dodać div push przed zamknięciem div div

Podstawową strukturą HTML jest 

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

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

Widok na żywo
Edytuj widok

David Taiaroa
źródło
Jeśli zawartość strony jest większa niż dostępny ekran, stopka zostanie przesunięta w dół. Chciałbym, aby stopka naprawdę przykleiła się do dołu (jak navbar-fixed-bottom)
niebieski Szybki
hej @delavnog, czy coś takiego by Ci pasowało? codepen.io/panchroma/pen/wMXWpY . Jedynymi ważnymi dla Ciebie bitami są HTML w linii 647 i CSS
David Taiaroa
@delavnog, ten sam pomysł z minimalną zawartością na stronie codepen.io/panchroma/pen/JGZKqy
David Taiaroa
Dzięki, to świetnie! Teraz, gdybym mógł ustawić główny div wyśrodkowany pionowo między nawigacją a stopką, byłoby to niesamowite! Zmodyfikowałem swój codepen: codepen.io/anon/pen/rxKMaW (Musiałem dodać margines do ciała, ponieważ nawigacja zjada górę treści)
blueFast
@delavnog, oto początek, jeśli główny korpus nie jest zbyt wysoki. W przypadku dłuższej zawartości zajęłoby
David Taiaroa
30

Oto uproszczony kod Sticky Footer na dzień dzisiejszy, ponieważ zawsze go optymalizują, a to jest DOBRE:

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
źródło
1
Idealne rozwiązanie. Właśnie tego szukałem.
Levimatt
1
Niestety ta stopka ma ustalony rozmiar. Czasami, gdy stopka jest dynamiczna, może być większa lub mniejsza niż jej wysokość w css.
23 W
27

Jestem trochę spóźniony na ten temat, ale natknąłem się na ten post, ponieważ ugryzło mnie to pytanie i wreszcie znalazłem naprawdę łatwy sposób na pokonanie tego, po prostu użyj navbarz navbar-fixed-bottomwłączoną klasą. Na przykład:

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

HTH

iMil
źródło
Podoba mi się prostota i skuteczność twojej odpowiedzi, która, nawiasem mówiąc, jest inteligentną odpowiedzią. Wiele odpowiedzi na ten sam problem jest pełen jquery i skomplikowanych rzeczy. Dzięki.
digitai
1
To połowa rozwiązania, jeśli zmienisz rozmiar, nadal musisz zadbać o nakładanie się treści na swojej stronie.
Baldráni,
@ Baldráni Nie jest to pełne rozwiązanie, nakładanie się działa dobrze, jeśli używasz wiersza i cola Bootstrap w pliku HTML stopki (co i tak powinieneś zrobić)
Tino Mclaren
To nie jest lepka stopka. Jest to stały dolny pasek nawigacyjny, który jest odpowiedni tylko dla zawartości paska nawigacyjnego i nakłada się na treść strony.
Zim
10

Oto moje zaktualizowane rozwiązanie tego problemu. 

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

I użyj tego w ten sposób: 

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

</div>

Lub 

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;
}
Zee
źródło
4
To nie jest dobre rozwiązanie, ponieważ stopka jest stała, co oznacza, że ​​pokrywa się ona z treścią strony (jeśli istnieje). Spróbuj dodać kilka some text<br>wierszy przed stopką i zmniejszyć rozmiar okna.
jmarceli,
@ user2041318: tak, to okropne ... dzięki za zwrócenie na to uwagi.
Sebastian,
Zostało to poprawione zgodnie z komentarzem jmarceli. Stopka nie jest już naprawiona.
zee
3

Przyklejony przykład nie działa dla mnie. Moje rozwiązanie:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}
Andi Giga
źródło
Prosty, dobry, staromodny CSS. Zadanie wykonane. Zabawne jest dla mnie, jak zawiłe są niektóre z wyżej ocenianych odpowiedzi. Czy Bootstrap nie powinien ułatwiać nam życia? 😂
Kal
2

Push divpowinien iść zaraz po wrap, a NIE w… tak po prostu 

<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
źródło
2

Odpowiedzi OP:

Dodaj to do pliku CSS.

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
źródło
2

Chciałem mieć elastyczną lepką stopkę i dlatego tu przybyłem. Najlepsze odpowiedzi poprowadziły mnie we właściwym kierunku.

Obecna (2 października 16) Bootstrap 3 css Przyklejona stopka (stały rozmiar) wygląda następująco:

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

Tak długo, jak stopka ma ustalony rozmiar, dolna krawędź korpusu tworzy pchnięcie, pozwalając na umieszczenie stopki w kieszeni. W takim przypadku oba są ustawione na 60 pikseli. Ale jeśli stopka nie zostanie naprawiona i przekroczy 60 pikseli wysokości, obejmie zawartość strony.

Uelastycznij: Usuń margines ciała css i wysokość stopki. Następnie dodaj JavaScript, aby uzyskać wysokość stopki i ustawić margines bodyBottom. Odbywa się to za pomocą funkcji setfooter (). Następnie dodaj detektory zdarzeń dla pierwszego załadowania strony i zmiany rozmiaru, które uruchamiają setfooter. Uwaga: Jeśli stopka ma akordeon lub cokolwiek innego, co powoduje zmianę rozmiaru, bez zmiany rozmiaru okna, musisz ponownie wywołać funkcję setfooter ().

Uruchom snippet, a następnie pełny ekran, aby go pokazać.

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>
Rozwiń fragment kodu

Sterner
źródło
2

Flexbox rozwiązał to raz na zawsze:

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

HTML

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

CSS

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

.Site-content {
  flex: 1;
}
Konstantin Schubert
źródło
2

Proste js

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

Aktualizacja nr 1

$(window).on('resize', function() {
    $('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
fdrv
źródło
1

Podsumowując je wszystkie, pamiętaj tylko o jednej rzeczy: wszystko oprócz stopki powinno mieć min-height: 100%niewiele mniej.

kshirish
źródło
1

Piszę mój uproszczony lepki kod stopki z dopełnieniem za pomocą LESS. Ta odpowiedź jest prawdopodobnie nie na temat, ponieważ pytanie nie mówi o wypełnieniu, więc jeśli jesteś zainteresowany, sprawdź ten post, aby uzyskać więcej informacji.

@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.
źródło
1

W oparciu o odpowiedź Jek-fdrv dodałem, .on('resize', function()aby upewnić się, że działa na każdym urządzeniu i każdej rozdzielczości:

$(window).on('resize', function() {
    if ($(document).height() <= $(window).height()) {
        $('footer').addClass("navbar-fixed-bottom");
    } else {
        $('footer').removeClass("navbar-fixed-bottom");
    }
});
iamchriswick
źródło
1

Obecna wersja bootstrap już nie działa dla tej funkcji. Jeśli pobierzesz ich przykład przyklejenia stopki i paska nawigacji i umieścisz dużą ilość treści w głównym obszarze ciała, stopka zostanie przesunięta w dół poza dolną część okna widoku. To wcale nie jest lepkie.

CJ Catalano
źródło
1

Oto rozwiązanie oparte na CSS dla w pełni responsywnej lepkiej stopki o zmiennej wysokości.
Zaleta: stopka umożliwia zmianę wysokości, ponieważ wysokość nie musi być już zakodowana w CSS.

Pokaż fragment kodu

A oto nieprefiks SCSS(dla gulp/ grunt):

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > * {
    flex-grow: 0;
  }
  > nav + .container {
    flex-grow: 1;
  }
}
tao
źródło
1

Po prostu użyj Flex! Upewnij się, że używasz body i main w swoim HTML i jest to jedno z najlepszych rozwiązań (chyba że potrzebujesz obsługi IE9). Nie wymaga stałej wysokości ani podobnego.

Jest to zalecane również w przypadku Materialize!

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

main {
    flex: 1 0 auto;
}
Kentor
źródło
0

w słowach Haml & Sass wszystko, co konieczne:

Haml dla app/view/layouts/application.html.haml

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

Sass dla 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

oparte na http://getbootstrap.com/examples/sticky-footer-navbar/

odpowiednik 8
źródło
0

Jeśli chcesz użyć kompilacji bootstrap w klasach dla stopki. Powinieneś także napisać javascript:

$(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());
  };
 });

Zapobiegnie nakładaniu się treści przez stałą stopkę i dostosuje padding-bottom kiedy użytkownik zmieni rozmiar okna / ekranu.

W powyższym skrypcie założyłem, że stopka jest umieszczana bezpośrednio wewnątrz znacznika body w ten sposób:

<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>

To zdecydowanie nie jest najlepsze rozwiązanie (ze względu na JS, którego można uniknąć), ale działa bez żadnych problemów z nakładaniem się, jest łatwe do wdrożenia i reaguje ( heightnie jest zakodowane w CSS).

jmarceli
źródło
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>
Rozwiń fragment kodu

Gpak
źródło
Jak to jest lepkie na dole?
Sebastian,
0

Oto bardzo prosta i czysta lepka stopka, której możesz użyć w bootstrapie. Całkowicie responsywny!

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

Przykład: CodePen Demo

Gothburz
źródło
To rozwiązanie przesunie pasek stopki w prawo podczas otwierania modalnego paska ładującego ze względu na absolutne ustawienie!
thethakuri
0

Używanie flexboxjest najłatwiejszym sposobem, jaki znalazłem, od facetów z CSS-tricks . Jest to prawdziwa lepka stopka, działa, gdy zawartość wynosi <100% strony i> 100% strony:

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

I CSS:

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

Zauważ, że jest to agnostyk bootstrap, więc działa z bootstrap i bez niego.

paskudny
źródło
0

Możesz po prostu spróbować dodać klasę na pasku nawigacyjnym stopki:

navbar-fixed-bottom

Następnie stwórz CSS o nazwie custom.css i body padding w ten sposób ..

body { padding-bottom: 70px; }
Ikram - Ud - Daula
źródło