Spuszczając stopkę na dół strony, twitter bootstrap

306

Zazwyczaj znam technikę opróżniania stopki za pomocą css.

Ale mam problem z uzyskaniem takiego podejścia do bootstrapu na Twitterze, najprawdopodobniej z powodu tego, że bootstrap z Twittera ma charakter responsywny. Korzystanie z bootstrapu na Twitterze Nie jestem w stanie uzyskać stopki, aby zejść na dół strony, stosując podejście opisane w powyższym wpisie na blogu.

css twitter-bootstrap footer Calvin Cheng
źródło

Zanim przetestujesz wszystkie odpowiedzi poniżej, pamiętaj, że OP chce, aby działał z twitter bootstrap. Ponieważ nie jest to konieczne, twitter bootstrap działa z Jquery, co oznacza, że jest włączony Javascript. Z tego powodu po prostu przetestuj moją odpowiedź: stackoverflow.com / pytania / 10099422 /…

HenryW

4

Oficjalny przykład: getbootstrap.com/examples/sticky-footer-navbar/…

użytkownik

1

Link jest zepsuty! Czy ktoś może naprawić oficjalny przykładowy link?

PassionInfinite

1

@PassionInfinite getbootstrap.com/docs/4.0/examples/sticky-footer-navbar może w przyszłości stać się starszą wersją ze względu na 4.0.

Ammad Khalid

323

Znaleziono fragmenty tutaj działa naprawdę dobrze dla bootstrap

HTML:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}

Chuan Yeong
źródło

To najlepsze rozwiązanie, jakie do tej pory próbowałem. Zaakceptowałem to jako odpowiedź.

Calvin Cheng

Cześć. Wdrożyłem tę metodę, działa świetnie, ale teraz mam problemy z wyświetlaniem strony na iPhonie (strona jest powiększona). Wszelkie pomysły, na czym polega problem? Oto kilka szczegółów: stackoverflow.com/questions/18621090/…

pupadupa

94

Na wypadek, gdybyś przeczytał tę odpowiedź i nie przewinął w dół, warto spojrzeć na inne odpowiedzi

MattyW,

4

szczególnie ten: stackoverflow.com/questions/10099422/…

HenryW

1

To najlepsza metoda, jaką znalazłem dla Bootstrap. Aby zareagować na urządzenie, pamiętaj, aby użyć zapytań o media, aby zaktualizować #main i .footer wysokości dla różnych rozmiarów ekranu

SyntaxGoonoo

466

Jest to teraz dołączone do Bootstrap 2.2.1.

Bootstrap 3.x

Użyj komponentu navbar i dodaj .navbar-fixed-bottomklasę:

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

Bootstrap 4.x

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

Nie zapomnij dodać body { padding-bottom: 70px; }lub w inny sposób zawartość strony może być objęta.

Dokumenty: http://getbootstrap.com/components/#navbar-fixed-bottom

sanon
źródło

35

@ChuanYeong Niestety nie ma navbar-static-bottom.

Lawrence Woodman,

25

@MikeCurry nie zapytał o stałą stopkę, ale taką, która „wypełnia” puste miejsce, jeśli strona nie ma wystarczającej zawartości, aby stopka pozostała na dole. Jeśli twoja stopka ma jedynie charakter informacyjny, naprawiona zajmuje tylko cenne miejsce.

rdlu

22

To nie jest lepka stopka, ponieważ jest używana pozycja: naprawiono; co jest nie tak

Furkat U.

9

Tak, to rozwiązanie spłukuje się tylko na dole rzutni, a nie na dole strony. tzn. stopka jest zawsze widoczna.

rism

3

Musiałem zanegować odpowiedź, ponieważ wprowadza zamieszanie. OP nie chce lepkiej stopki.

HenryW

77

Działający przykład dla bootstrapu na Twitterze NIE KLEJĄ STOPY

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

Wersja, która zawsze aktualizuje się w przypadku, gdy użytkownik otworzy okno devtools lub zmieni rozmiar okna.

<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>

Potrzebujesz przynajmniej elementu z `#footer`

Jeśli nie chcesz paska przewijania, jeśli treść zmieści się na ekranie, po prostu zmień wartość z 10 na 0.
Pasek przewijania pojawi się, jeśli zawartość nie pasuje do ekranu.

HenryW
źródło

9

Tak, ja też poszedłem z tym. CSS bywa czasem tak głupi. Nie jest to niemożliwe, ale rozwiązania ogólnego przeznaczenia mogą być trudne do znalezienia, a naprawianie irytujących rzeczy takich jak ten w naszych układach nie powinno zabierać podróży do wymiany stosów, wielokrotnych zmian zasad, testów krzyżowych i ewentualnego poddania się prostemu JS sztuczka. Tak, czuję się trochę brudny, ale przynajmniej działa.

spotkanie

3

każde rozwiązanie, na które patrzyłem, jest złe. Jest to TYLKO ten, który faktycznie robi to, co powinien - przyklej stopkę do dolnej części strony, nie zasłaniając żadnej zawartości, jeśli zmieni się rozmiar przeglądarki.

Dave

13

zrobił to cicha praca, jak oczekiwano dla mnie, jeszcze, jeden z lepszych odpowiedzi, mam stałe mój problem, zastępując $('#footer').height();z$('#footer').outerHeight();

DarkMukke

3

Świetna odpowiedź! Miałem kilka adaptacji, które moim zdaniem mogą to poprawić tutaj: stackoverflow.com/a/36385654/8207

Cory

6

Najlepsza odpowiedź, jaką znalazłem. Jeśli chcesz, aby działał po zmianie rozmiaru okna, po prostu umieść główny kod z odpowiedzi w środku $(window).resize(function() {//main code goes here});i wywołaj, $(window).resize();aby ustawić go podczas ładowania strony.

Szymon Sadło

36

Oto jak to zaimplementować z oficjalnej strony:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Właśnie go przetestowałem i DZIAŁA WIELKO! :)

HTML

<body>

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

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</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.</p>
      </div>

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

    <div id="footer">
      <div class="container">
        <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
</body>

Odpowiedni kod CSS jest następujący:

/* 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 !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -30px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
}

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

Leniel Maccaferri
źródło

7

Dzięki za opublikowanie tego, było to zdecydowanie najlepsze rozwiązanie (nie wspominając o jedynym, które działało) dla mojego konkretnego projektu i oczywiście fajnie, że pochodzi bezpośrednio od samego projektu.

Cory W.

1

Nie wiem, o co chodzi, ale nie mogłem go uruchomić bez dodania zwoju do stron. Skończyło się na zmianie .wrapper CSS, więc minimalna wysokość to „calc (100% - 120px)”, gdzie 120px jest wysokością mojej stopki i usunąłem <div id = "push"> </div> z html ponieważ wydawało się, że nie robi nic poza dodawaniem wysokości do strony, której nie potrzebowałem.

jammyman34

36

W przypadku Sticky Footer używamy dwóch DIV'sw HTML dla podstawowego efektu lepkiej stopki . Napisz w ten sposób:

HTML

<div class="container"></div>

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

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}

sandeep
źródło

7

Powiedział, że używa Twittera Bootstrap. Jaki byłby najłatwiejszy sposób zintegrowania tego z Bootstrap bez całkowitego przepisywania HTML?

Cody Gray

1

Jeśli OP chce osiągnąć efekt lepkiej stopki, musi zmienić MarkUp

sandeep

Dziękuję Ci! To była jedyna metoda, która faktycznie działała dla mnie w witrynie ASP.NET MVC5, która używa Bootstrap. +1

Yann Duran

30

Znacznie prostszy oficjalny przykład: http://getbootstrap.com/examples/sticky-footer-navbar/

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

użytkownik
źródło

19

Znalazłem mieszankę navbar-inneri navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

Wydaje się dobry i działa dla mnie

wprowadź opis zdjęcia tutaj

Zobacz przykład w Fiddle

Maxim Shoustin
źródło

2

najprostsze i najbardziej eleganckie rozwiązanie. Bądź ostrożny podczas warzenia własnego kodu CSS, ponieważ nie będzie on kompatybilny wstecz z bootstrap

1-14x0r

Użyłem tego i miałem problem na starym Androidzie (może froy?) Ze stronami krótszymi niż ekran. W przeciwnym razie działał dobrze na FF, Chrome, IE11, iPhone, Nexus 7.

Bnieland

Idealne i niezwykle proste!

ramires.cabral

18

W najnowszej wersji bootstrap 4.3 można to zrobić za pomocą .fixed-bottomklasy.

<div class="fixed-bottom"></div>

Oto jak używam go ze stopką:

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

Możesz znaleźć więcej informacji w dokumentacji pozycji tutaj .

Mohamed Ali JAMAOUI
źródło

1

To nadal działa z oficjalną wersją 4 uwolnioną.

klewis

Zauważ, że przykład na getbootstrap.com/docs/4.1/examples/sticky-footer ma styl linii-wysokość = 60 pikseli na elemencie stopki. Jest to nie tylko niepotrzebne, ale także uniemożliwia poprawne działanie stopki, jeśli jest ona elementem nadrzędnym jednego lub więcej elementów div, co często ma miejsce.

ScottyB

13

Odpowiedź HenryW jest dobra, choć potrzebowałem kilku poprawek, aby działało tak, jak chciałem. W szczególności następujące uchwyty:

Unikanie „zawirowań” podczas wczytywania strony poprzez zaznaczenie jako niewidoczne i ustawienie widoczne w javascript
Radzenie sobie z przeglądarką zmienia się z wdziękiem
Dodatkowo ustawianie stopki z powrotem na stronę, jeśli przeglądarka zmniejsza się, a stopka staje się większa niż strona
Ulepszenia funkcji wysokości

Oto, co zadziałało dla mnie z tymi poprawkami:

HTML:

<div id="footer" class="invisible">My sweet footer</div>

CSS:

#footer {
    padding-bottom: 30px;
}

JavaScript:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});

Cory
źródło

11

To działało dla mnie idealnie.

Dodaj tę klasę navbar-fixed-bottom do stopki.

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

Użyłem tego w ten sposób:

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

I ustawia się na dole na całej szerokości.

Edycja: Ustawi stopkę na zawsze widoczną, jest to coś, co należy wziąć pod uwagę.

sp_omer
źródło

10

Musisz owinąć .container-fluiddiv, aby lepka stopka działała, brakuje ci również niektórych właściwości w swojej .wrapperklasie. Spróbuj tego:

Usuń padding-top:70pxz bodytagu i umieść go w swoim .container-fluid, w ten sposób:

.wrapper > .container-fluid {
    padding-top: 70px;
}

Musimy to zrobić, ponieważ przesuwanie w bodydół w celu dostosowania paska nawigacyjnego kończy się przesunięciem stopki nieco dalej (70 pikseli dalej) poza obszar wyświetlania, więc otrzymujemy pasek przewijania. Osiągamy lepsze wyniki pchając.container-fluidZamiast tego div.

Następnie musimy usunąć .wrapperklasę poza twoją .container-fluiddiv i owinąć ją #maindiv, tak jak to:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>

Twoja stopka oczywiście musi znajdować się poza .wrapperdiv, więc usuń ją z `.wrapper div i umieść na zewnątrz, w ten sposób:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

Po tym wszystkim zrobisz, właściwie popchnij stopkę bliżej .wrapperklasy, używając ujemnego marginesu:

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

I to powinno działać, chociaż prawdopodobnie będziesz musiał zmodyfikować kilka innych rzeczy, aby działało, gdy rozmiar ekranu zostanie zmieniony, np. Zresetowanie wysokości w .wrapperklasie, tak jak:

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}

Andres Ilich
źródło

9

Jest to właściwy sposób, aby to zrobić za pomocą Twittera Bootstrap i nowej klasy navbar-fixed-bottom: (nie masz pojęcia, ile czasu spędziłem na szukaniu tego)

CSS:

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML:

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Régis B.
źródło

9

Skorzystaj z narzędzi elastycznych wbudowanych w Bootstrap 4! Oto, co wymyśliłem, używając głównie narzędzi Bootstrap 4.

<div class="d-flex flex-column" style="min-height: 100vh;">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>

.d-flex uczynić główny div elastycznym kontenerem
.flex-column na głównym div, aby ułożyć elementy Flex w kolumnie
min-height: 100vh do głównego div, z atrybutem stylu lub w CSS, aby wypełnić okno pionowo
.flex-grow-1 w kontenerze element, który ma mieć główny kontener zawartości, zajmuje całą przestrzeń pozostałą na wysokości rzutni.

EGhost57
źródło

Zamiast min-height: 100vhtej min-vh-100klasy z Bootstrap mogą być użyte.

ikonuk

To rozwiązanie działało świetnie, w tym sugestia min-vh-100 z @ikonuk

TGR

4

Użyj komponentu navbar i dodaj klasę .navbar-fixed-bottom:

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

dodaj ciało

  { padding-bottom: 70px; }

Plik administratora 3
źródło

3

do obsługi układów wiązań szerokości użyj następujących elementów, aby nie zaokrąglać narożników i aby pasek nawigacyjny znajdował się równo z bokami aplikacji

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

następnie możesz użyć css, aby przesłonić klasy bootstrap, aby dostosować wysokość, czcionkę i kolor

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }

1-14x0r
źródło

3

Do obsługi tego możesz użyć jQuery:

$(function() {
    /**
     * Read the size of the window and reposition the footer at the bottom.
     */
    var stickyFooter = function(){
        var pageHeight = $('html').height();
        var windowHeight = $(window).height();
        var footerHeight = $('footer').outerHeight();

        // A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
        // and thus is outside of its container and counted in $('html').height().
        var totalHeight = $('footer').hasClass('fixed-bottom') ?
            pageHeight + footerHeight : pageHeight;

        // If the window is larger than the content, fix the footer at the bottom.
        if (windowHeight >= totalHeight) {
            return $('footer').addClass('fixed-bottom');
        } else {
            // If the page content is larger than the window, the footer must move.
            return $('footer').removeClass('fixed-bottom');
        }
    };

    // Call when this script is first loaded.
    window.onload = stickyFooter;

    // Call again when the window is resized.
    $(window).resize(function() {
        stickyFooter();
    });
});

DucCuong
źródło

2

Jedyny, który pracował dla mnie !:

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}

Ricardo
źródło

2

Najprostszą techniką jest prawdopodobnie użycie Bootstrap navbar-static-bottomw połączeniu z ustawieniem głównego div kontenera za pomocą height: 100vh(nowy procent portów widoku CSS3 ). Spowoduje to spuszczenie stopki na dół.

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>

Pan Wangperawong
źródło

2

Testowane z Bootstrap 3.6.6.

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

.footer {
  bottom: 0;
  position: absolute;
}

Dušan Maďar
źródło

1

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

Wysokość stopki odpowiada rozmiarowi dolnego wcięcia elementu zawijanego.

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}

Sharpless512
źródło

1

Oto rozwiązanie dla najnowszej wersji Bootstrap (4.3 w momencie pisania) za pomocą Flexboksa.

HTML:

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

I przykład codepen: https://codepen.io/tillytoby/pen/QPdomR

Tom T.
źródło

1

Na przykład Bootstrap 4.3 , jeśli na przykład tracisz zdrowie psychiczne, tak to działa:

Wszyscy rodzice div stopki muszą mieć height: 100%( h-100klasa)
Bezpośredni rodzic stopki musi mieć display: flex( d-flexklasa)
Stopka musi mieć margin-top: auto( mt-autoklasa)

Problem polega na tym, że we współczesnych frameworkach często mamy dodatkowe owijki wokół tych elementów.

Na przykład w moim przypadku za pomocą Angulara skomponowałem widok z oddzielnego katalogu głównego aplikacji, głównego komponentu aplikacji i komponentu stopki - z których wszystkie dodały swój niestandardowy element do DOM.

Aby to zadziałało, musiałem dodać klasy do tych elementów opakowania: dodatkowe h-100, przesunięcie o d-flexjeden poziom w dół i przesunięcie o mt-autojeden poziom w górę od stopki (więc tak naprawdę nie jest już w klasie stopki, ale według mojego <app-footer>zwyczaju element).

MrValueType
źródło

Musiałem położyć class="h-100"do <html>tagu też.

Kel Solaar

1

Użyj tego fragmentu kodu w bootstrapie, to działa

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>

sanjay
źródło

1

Rozwiązanie Bootstrap v4 +

Oto rozwiązanie, które nie wymaga ponownego przemyślenia struktury HTML ani żadnych dodatkowych sztuczek CSS obejmujących wypełnianie:

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

Pamiętaj, że to rozwiązanie pozwala na stosowanie stopek o elastycznych wysokościach, co jest szczególnie przydatne przy projektowaniu stron dla wielu rozmiarów ekranu z zawijaniem zawartości po zmniejszeniu.

Dlaczego to działa

style="height:100%;"sprawia, że <html>znacznik zajmuje całą przestrzeń dokumentu.
d-flexzestawy klas display:flexdo naszego <body>tagu.
flex-columnzestawy klas flex-direction:columndo naszego <body>tagu. Jego dzieci ( <header>, <main>, <footer>i każdy inny bezpośredni dziecko) są teraz ustawione pionowo.
h-100zestawy klas height:100%do naszych<body> znacznika, co oznacza, że obejmie cały ekran pionowo.
klasa flex-grow-1ustawia flex-grow:1nasz <main>, skutecznie instruując go, aby wypełnił pozostałą przestrzeń pionową, a tym samym osiąga 100% wysokości pionowej, którą ustawiliśmy wcześniej na naszym <body>tagu.

Działające demo tutaj: https://codepen.io/maxencemaire/pen/VwvyRQB

Więcej informacji na temat Flexbox można znaleźć na stronie https://css-tricks.com/snippets/css/a-guide-to-flexbox/ .

Kathandrax
źródło

h-100klasa nie działa poprawnie, lepiej jest użyć min-vh-100.

ikonuk

@ikonuk Co dokładnie rozumiesz przez „nie działa poprawnie”? Proszę opracować.

Kathandrax

Ponieważ h-100klasa zawsze zależy od wysokości elementów nadrzędnych i może nie działać poprawnie w niektórych przypadkach. Ponieważ chcemy, aby stopka znajdowała się u dołu rzutni, dobrą praktyką byłoby użycie wysokości rzutni.

ikonuk

Ponownie zdefiniuj „niektóre przypadki”. Twój argument dotyczący zależności nadrzędnej odnosi się do tego samego min-width. Właśnie dlatego HTMLtag ma height100% w kodzie. Przykład działa i nie rozumiem, dlaczego nie zapewniłby obsługi heightwłaściwości CSS przez przeglądarkę , co ostatecznie przekłada się na fragment kodu bootstrap.

Kathandrax

Nie powiedziałem, że twój przykład nie działa. Nie wszyscy używają stylu w HTMLtagu. W moim przypadku twoje rozwiązanie nie działało, ponieważ nie wolę używać stylu w HTMLtagu. I nie chcę, żeby bodyznacznik zależał od innego rodzica, ale od rzutni. Nie musisz stawiać style="height:100%;"i h-100jednocześnie. Wkładanie min-vh-100ciała po prostu wykonuje pracę i zmniejsza kod.

ikonuk

0

Wygląda na height:100%to, że łamany jest „łańcuch” div#main. Spróbuj go dodać height:100%, a to może przybliżyć cię do celu.

brains911
źródło

0

Tutaj znajdziesz podejście w HAML ( http://haml.info ) z paskiem nawigacyjnym u góry i stopką u dołu strony:

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER

Hannes
źródło

Czy mógłbyś trochę rozwinąć swoją odpowiedź? Odpowiedzi zawierające tylko kod są generalnie odradzane.

Qix - MONICA ZOSTAŁ SZYBOWANY

1

Dobra, co chcesz wiedzieć?

Hannes

Nie muszę tego wiedzieć, ale ktoś wchodzący później na tę stronę może nie wiedzieć dokładnie, dlaczego kod Twojej odpowiedzi robi to, co robi.

Qix - MONICA ZOSTAŁ SZYBOWANY

Prawdopodobnie powinienem go usunąć. Napisałem nowe wprowadzenie. :)

Hannes

0

Nie komplikuj.

footer {
  bottom: 0;
  position: absolute;
}

Konieczne może być także przesunięcie wysokości stopki poprzez dodanie margin-bottomodpowiednika wysokości stopki do body.

obfk
źródło

0

Oto przykład z użyciem css3:

CSS:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

skrzypce

Zwycięzca
źródło

0

Oto jak to robi bootstrap:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Wystarczy użyć źródła strony i powinieneś zobaczyć. Nie zapomnij <div id="wrap">o szczycie.

Bren
źródło

0

inne możliwe rozwiązanie, po prostu używając zapytań o media

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}

GeorgeWL
źródło

Spuszczając stopkę na dół strony, twitter bootstrap

Odpowiedzi:

Potrzebujesz przynajmniej elementu z #footer

Rozwiązanie Bootstrap v4 +

Dlaczego to działa

Potrzebujesz przynajmniej elementu z `#footer`