Bootstrap 3 Flush Stopka do dołu. nie Naprawiono

Question

Bootstrap 3 Flush Stopka do dołu. nie Naprawiono

Używam Bootstrap 3 dla strony, którą projektuję.

Chcę mieć taką stopkę jak ta próbka. próbka

Proszę zauważyć, że nie chcę tego naprawiać, więc Bootstrap navbar-fixed-bottom nie rozwiązuje mojego problemu. Chcę tylko, aby zawsze był na dole treści, a także był responsywny.

Każdy przewodnik będzie bardzo mile widziany.

EDIT:

Przepraszam, jeśli nie wyraziłem się jasno. Co się teraz dzieje, gdy ciało treści nie ma dość treści. Moja stopka porusza się w górę, a następnie pozostawia puste miejsce na dole.

Oto co mam teraz do mojego navbara

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

157

html css twitter-bootstrap footer

Author: j08691, 2014-01-24

Source

11 answers

Istnieje uproszczone rozwiązanie z bootstrap tutaj (gdzie nie trzeba tworzyć nowej klasy): http://getbootstrap.com/examples/sticky-footer-navbar/

Po otwarciu tej strony kliknij prawym przyciskiem myszy na przeglądarce i "zobacz źródło" i otwórz pasek nawigacyjny sticky-footer.plik css ( http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css )

Widać, że potrzebujesz tylko tego 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;
}

Dla tego HTML

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

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

291

Author: Jboy Flaga,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-23 13:40:24

Aktualizacja: to nie odpowiada bezpośrednio na pytanie w całości, ale inni mogą uznać to za przydatne.

To jest HTML dla Twojej responsywnej stopki

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

Dla CSS

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

Uwaga: w czasie postu na to pytanie powyższe linie kodu nie popychają stopki poniżej zawartości strony; ale powstrzyma stopkę przed indeksowaniem w połowie strony, gdy na stronie jest mało treści. Dla przykładu, który przesuwa stopkę poniżej zawartość strony zajrzyj tutaj http://getbootstrap.com/examples/sticky-footer/

12

Author: Rex CoolCode Charles,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-09 20:04:56

Użyj flexbox, ponieważ możesz go używać do swojej dyspozycji. Rozwiązanie oferowane przez bootstrap 4 nadal poluje na nakładki treści w responsywnym layoucie, np.: pęknie w widoku mobilnym, natknąłem się na najbardziej zgrabną sztuczkę jest użycie pokazanego tutaj demo rozwiązania flexbox: ( https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/) w ten sposób nie musimy zajmować się problemem stałej wysokości, który jest już przestarzałym rozwiązaniem...To rozwiązanie działa dla bootstrap 3 i 4 niezależnie od tego, używam.

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

6

Author: Christopher Tan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-16 14:43:54

Dla osób, które nadal zmagają się z problemami, a odpowiedź nie działa tak, jak chcesz, oto najprostsze rozwiązanie, jakie znalazłem.

Zawiń główną zawartość i przypisz jej minimalną wysokość widoku. Dostosuj 60 do potrzeb Twojego stylu.

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

To wszystko i działa całkiem dobrze.

6

Author: eGlu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-24 09:52:37

Galen Gidman opublikował naprawdę dobre rozwiązanie problemu elastycznej lepkiej stopki, która nie ma stałej wysokości. Jego pełne rozwiązanie znajdziesz na jego blogu: http://galengidman.com/2014/03/25/responsive-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%; }

4

Author: weiy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-28 17:43:07

Ta metoda wykorzystuje minimalne znaczniki. Wystarczy umieścić wszystkie swoje treści w .wrapper, który ma padding-bottom i ujemny margines-bottom równy wysokości stopki (w moim przykładzie 100px).

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

Author: Vin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-03 06:36:41

Dla Bootstrap:

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

2

Author: shilovk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-01 12:50:17

Główną wadą powyższych rozwiązań jest to, że mają stałą wysokość dla stopki.
A to po prostu nie tnie tego w prawdziwym świecie, gdzie ludzie używają milionów urządzeń i mają ten zły nawyk obracania nimi, gdy najmniej się tego spodziewasz i **puf! * * tam idzie zawartość strony za stopką!

W świecie rzeczywistym potrzebujesz funkcji, która oblicza Wysokość stopki i dynamicznie dostosowuje zawartość strony padding-bottom, aby dostosować tej wysokości. I musisz uruchomić tę małą funkcję w zdarzeniach page load i resize, a także w stopce DOMSubtreeModified (na wypadek, gdyby stopka była dynamicznie aktualizowana asynchronicznie lub zawierała animowane elementy, które zmieniają rozmiar podczas interakcji).

Oto proof of concept, używając jQuery v3.0.0 i Bootstrap v4-alpha, ale nie ma powodu, dla którego nie powinno działać na niższych wersjach każdego z nich.

jQuery(document).ready(function( $ ) {
  $.fn.accomodateFooter = function(){
    var footerHeight = $('footer').outerHeight();
    $(this).css({'padding-bottom':footerHeight+'px'});
  }
  // accomodate footer after its html has changed
  $('footer').on('DOMSubtreeModified', function(){
    $('body').accomodateFooter();
  })
  // accomodate footer on page load and resize
  $(window).on('load resize', function(){
    $('body').accomodateFooter();
  })
  $('body').accomodateFooter();
  window.addMoreContentToFooter = function() {
    var f = $('footer');
    f.append($('<p />',{
      text:"Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."}))
    .append($('<hr />'));
  }
});

body {
  min-height: 100vh;
  position: relative;
  padding-top: 54px;
}
footer {
  background-color: rgba(0,0,0,.65);
  color: white;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1.5rem;
  display: block;
}
footer hr {
  border-top: 1px solid rgba(0,0,0,.42);
  border-bottom: 1px solid rgba(255,255,255,.21);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <div class="container">

      <div class="starter-template">
        <h1>Feed that footer - not a game (yet!)</h1>
        <p class="lead">You will notice the body bottom padding is growing to accomodate the height of the footer as you feed it (so the page contents do not get covered by it).</p><button class="btn btn-warning" onclick="window.addMoreContentToFooter()">Feed that footer</button><hr /><blockquote class="lead"><strong>Note:</strong> I used jQuery <code>v3.1.1-slim</code> and Bootstrap <code>v4-alpha-6</code> but there is no reason why it shouldn't work with lower versions of each.</blockquote>
      </div>
    </div>
<footer>I am a footer with dynamic content.
  <hr />

Początkowo zamieściłem to rozwiązanie tutaj ale zdałem sobie sprawę, że może to pomóc większej liczbie osób, jeśli zamieszczone pod tym pytaniem.

Uwaga: celowo owinąłem $([selector]).accomodateFooter() jako wtyczkę jQuery, więc może ona być uruchomiona na dowolnym elemencie DOM, ponieważ w większości układów nie jest to $('body')'s bottom-padding, który wymaga dostosowania, ale jakiś element wrapper strony z position:relative (Zwykle bezpośrednim rodzicem footer).

2

Author: Andrei Gheorghiu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-25 02:59:19

Żadne z tych rozwiązań nie działało dla mnie idealnie, ponieważ użyłem navbar-inverse class w stopce. Ale dostałem rozwiązanie, które działało i nie wymaga Javascript. Używany Chrome do pomocy w tworzeniu zapytań o media. Wysokość stopki zmienia się wraz ze zmianą rozmiaru ekranu, więc musisz zwrócić na to uwagę i odpowiednio dostosować. Twoja zawartość stopki (ustawiam id = "stopka", aby zdefiniować moją zawartość) powinna używać position = absolute i bottom = 0, aby utrzymać ją na dole. / Width = " 100%" / Oto mój CSS z zapytaniami o media. Musisz dostosować min-width i max-width i dodać lub usunąć niektóre elementy:

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

1

Author: Brian Edwards,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-21 13:09:39

Lub to

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

1

Author: Annjawn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-29 04:17:43

score 116 · Accepted Answer

Zobacz przykład poniżej. Spowoduje to umieszczenie stopki na dole, jeśli strona ma mniej zawartości i zachowuje się jak normalna stopka, jeśli strona ma więcej zawartości.

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>

UPDATE: nowa wersja Bootstrap pokazuje, jak dodać sticky footer bez dodawania wrappera. Więcej szczegółów znajdziesz w odpowiedzi Jboya flagi.