Bootstrap 3 Dopasuj stopkę do dołu. nie naprawiony


177

Używam Bootstrap 3 w przypadku witryny, którą projektuję.

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

Pamiętaj, że nie chcę, aby to NAPRAWIONE, więc bootstrap navbar-fixed-bottom nie rozwiązuje mojego problemu. Chcę tylko, aby zawsze znajdował się na dole treści i był responsywny.

Każdy przewodnik będzie bardzo mile widziany.


EDYTOWAĆ:

Przepraszam, jeśli nie było jasne. Teraz dzieje się tak, że treść nie ma wystarczającej ilości treści. Moja stopka przesuwa się w górę, a następnie zostawia puste miejsce na dole.

Oto, co mam teraz dla mojego paska nawigacyjnego

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

Czy masz przykładowy kod, nad którym pracowałeś, a który sprawia Ci problem?
badAdviceGuy

Wygląda na to, że zwykła stopka, jeśli nie chcesz Naprawiono, możesz zaktualizować styl. Jaki masz problem?
Mutant

Kiedy jest to ostatnia rzecz w twoim HTML, zawsze będzie na dole. Zagmatwane pytanie, które wymaga przykładu kodu, aby zrozumieć, na czym polega problem.
Joe Conlin


@davidpauljunior: To są lepkie stopki, których nie szukam
user3169403

Odpowiedzi:


124

Zobacz poniższy przykład. Spowoduje to umieszczenie stopki na dole, jeśli strona ma mniej treści i będzie zachowywać się jak normalna stopka, jeśli strona ma więcej treś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>

AKTUALIZACJA : Nowa wersja Bootstrap pokazuje, jak dodać lepką stopkę bez dodawania otoki. Aby uzyskać więcej informacji, zobacz odpowiedź Jboy Flaga.


Twoje linki są zepsute
Halter

2
Dlaczego w opakowaniu są dwie definicje właściwości wysokości?
Niezauważalne

@HardlyNoticeable jeden to min-width, aby wymusić opakowanie, nawet jeśli zawartość jest mniejsza.
Surjith SM

Wciąż zastanawiam się, dlaczego istnieją dwie definicje właściwości wysokości. Nie odpowiedziałeś na @SurjithSM
Erowlin

@Erowlin To jest błąd. nie potrzebujesz dwóch właściwości wysokości. Wystarczy tylko minimalna wysokość, zredagowałem odpowiedź.
Surjith SM

316

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

Po otwarciu tej strony kliknij prawym przyciskiem myszy przeglądarkę i „Wyświetl źródło”, a następnie otwórz plik sticky-footer-navbar.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>

19
To (z dokumentacji / przykładów Bootstrap) powinno być akceptowaną odpowiedzią.
richardm

5
U mnie to nie działa, ponieważ moja stopka jest dość wysoka. Świetnie, jeśli chcesz tylko akapit, ale mój ma kilka kolumn - używając tej metody, kończę z marginesem pod stopką, gdy
zejdę

9
Czy to nie jest rozwiązanie w postaci lepkiej stopki Bootstraps? Nie sądzę, żeby OP miał to na myśli. Dla mnie przy długiej stronie moja stopka pojawiała się na dole ekranu, ale nie na dole treści (czyli nad treścią). Musiałem zmienić Pozycja: absolutna; względne (w klasie .footer), aby to zadziałało.
Tino Mclaren

24
To byłaby prawidłowa odpowiedź, gdyby ten temat nie miał w tytule "not fixed" ...
ruudy

1
działa to tylko w przypadku stopek o stałym rozmiarze, wolę rozwiązanie Philipa Waltona zaproponowane przez @ChristopherTan, które jest super cienkie i niezależne od wysokości stopki
buergi

16

użyj flexbox, ponieważ możesz go używać do swojej dyspozycji. Rozwiązanie oferowane przez bootstrap 4 wciąż poluje na nakładające się treści w responsywnym układzie, np .: będzie się zepsuć w widoku mobilnym, natknąłem się na najbardziej zgrabną sztuczkę, aby skorzystać z demonstracji rozwiązania flexbox pokazanej tutaj :( https://philipwalton.github.io / rozwiązany po schematu flexbox / demos / lepkiej stopki / ) w ten sposób, że nie mamy do czynienia ze stałym kwestii wysokości, która jest rozwiązaniem przestarzałym już ... to rozwiązanie działa na bootstrap 3 i 4 w zależności od tego używasz.

<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
To bardzo sprytne rozwiązanie. Myślę, że CSS ma zbyt wiele do zaoferowania, że ​​nawet nie wiemy, jak najlepiej go wykorzystać.
Gilbert

2
Uwielbiam to rozwiązanie. Niesamowity.
Bagus Aji Santoso

14

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

To jest kod HTML dla Twojej elastycznej 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 momencie wysyłania tego pytania powyższe wiersze kodu nie powodują wypychania stopki poniżej zawartości strony; ale zapobiegnie indeksowaniu stopki w połowie strony w górę, gdy na stronie jest mało treści. Aby zobaczyć przykład, który powoduje przesunięcie stopki pod zawartość strony, zajrzyj tutaj http://getbootstrap.com/examples/sticky-footer/


To właściwie złe rozwiązanie, ponieważ stopka zakrywa główną treść, gdy się spotykają. Musisz ustawić padding-bottomgłówny kontener zawartości równy wysokości stopki. I musisz to robić dynamicznie na stronie loadi resizewydarzeniach, a także w stopce DOMSubtreeModified.
tao

9

Dla osób, które wciąż mają problemy, a rozwiązanie, na które udzielono odpowiedzi, nie działa tak, jak chcesz, oto najprostsze rozwiązanie, jakie znalazłem.

Owiń główną treść i przypisz jej minimalną wysokość widoku. Dostosuj 60 do dowolnej wartości, jakiej potrzebuje Twój styl.

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

To wszystko i działa całkiem nieźle.


Miałem ten sam problem, co ten, o którym mowa. Po wypróbowaniu prawie wszystkich wysoko ocenianych odpowiedzi, była to jedyna, która zadziałała dla mnie. I działał we wszystkich rozmiarach. Jedyna zmiana, którą wprowadziłem, to „min-height: 70vh”. Będzie to zależeć od rozmiarów nagłówka i stopki Twojej witryny.
Arfath

Powinien być wyższy, działa dokładnie tak, jak żądano.
ignam

To działało na moje potrzeby. Po prostu dostosuj wartość min-height, aż uzyskasz pożądany efekt.
sawyerrken

Cudownie, to najprostsze i najskuteczniejsze rozwiązanie problemu umieszczania stopki!
Prahlad Yeri

5

Galen Gidman opublikował naprawdę dobre rozwiązanie problemu elastycznej stopki, która nie ma stałej wysokości. Pełne rozwiązanie można znaleźć na jego blogu: 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%; }

Wydaje się, że jest to zgodne z bootstrapem i dlatego powinno być akceptowaną odpowiedzią, imho. To nie jest idealne, ponieważ wydaje się, że pojawia się poziomy pasek przewijania.
Florian Mertens

Florian: Nie mam poziomego paska przewijania.
Niezauważalne

4

Aby uzyskać czyste rozwiązanie CSS, przewiń po drugim <hr>. Pierwsza to wstępna odpowiedź (udzielona w 2016 roku)


Główną wadą powyższych rozwiązań jest to, że mają one stałą wysokość stopki.
I to po prostu nie wystarcza w prawdziwym świecie, w którym ludzie używają miliardów urządzeń i mają zły nawyk obracania ich, kiedy najmniej się tego spodziewasz i ** Poof! ** zawartość Twojej strony znajduje się za stopką!

W prawdziwym świecie potrzebujesz funkcji, która oblicza wysokość stopki i dynamicznie dostosowuje zawartość strony padding-bottomdo tej wysokości. I musisz uruchomić tę małą funkcję na stronie loadi resizezdarzeniach, a także na stopce DOMSubtreeModified(na wypadek gdyby Twoja stopka była dynamicznie aktualizowana asynchronicznie lub zawierała animowane elementy, które zmieniają rozmiar podczas interakcji).

Oto dowód słuszności koncepcji przy użyciu jQuery v3.0.0i Bootstrap v4-alpha, ale nie ma powodu, dla którego nie miałby działać na niższych wersjach każdego z nich.

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

Uwaga: Mam celowo owinął $([selector]).accomodateFooter()jako plugin jQuery, więc to może być uruchamiany na dowolnym elemencie DOM, jak w większości układów nie jest to $('body')„s bottom-padding, że potrzeby regulacji, ale niektóre strona wrapper elementu z position:relative(zazwyczaj natychmiastowe dominującą footer) .


Późniejsza edycja (ponad 3 lata po pierwszej odpowiedzi):

W tym momencie nie uważam już za dopuszczalne używanie JavaScript do pozycjonowania dynamicznej stopki treści na dole strony. Można to osiągnąć za pomocą samego CSS, używając flexboksa, błyskawicznego działania w różnych przeglądarkach.

Oto ona:


3

Ta metoda wykorzystuje minimalne znaczniki. Po prostu umieść całą swoją zawartość w .wrapper, który ma dopełnienie-dół i ujemny dół marginesu równe 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

Albo to

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

1

W przypadku Bootstrap:

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

2
Pytanie konkretnie stwierdza, że navbar-fixed-bottomto NIE rozwiązuje problem.
p4sh4

1

Żadne z tych rozwiązań nie działało idealnie, ponieważ w stopce użyłem klasy navbar-inverse. Ale otrzymałem rozwiązanie, które działało i nie zawierało Javascript. Używał przeglądarki Chrome do tworzenia zapytań o media. Wysokość stopki zmienia się wraz ze zmianą rozmiaru ekranu, więc musisz zwrócić na to uwagę i odpowiednio dostosować. Treść stopki (ustawiłem id = "footer", aby zdefiniować moją treść) powinna używać postion = bezwzględna i bottom = 0, aby pozostawić ją na dole. Również szerokość: 100%. Oto mój CSS z zapytaniami o media. Będziesz musiał dostosować min-width i max-width oraz 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; 
    }
}

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.