Spłukiwanie stopki na dole strony, twitter bootstrap
Ogólnie znam technikę spłukiwania stopki za pomocą css i to następujące podejście .
Ale mam pewne problemy z uzyskaniem tego podejścia do pracy na Twitterze bootstrap, najprawdopodobniej ze względu na fakt, że Twitter bootstrap jest responsywny w naturze. Korzystając z Twittera bootstrap nie jestem w stanie uzyskać stopki do spłukania na dole strony za pomocą podejścia opisanego w powyższym poście na blogu.
26 answers
Znalazłem 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;
}
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-04-19 22:16:38
Jest to teraz zawarte w Bootstrap 2.2.1.
Użyj komponentu navbar i dodaj .navbar-fixed-bottom klasę:
<div class="navbar navbar-fixed-bottom"></div>
Nie zapomnij dodać body { padding-bottom: 70px; } lub w inny sposób zawartość strony może być pokryta.
Docs: http://getbootstrap.com/components/#navbar-fixed-bottom
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-08-09 22:14:26
Przykład pracy dla Twitter bootstrap nie STICKY FOOTER
<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>
Potrzebujesz przynajmniej elementu z #footer
Jeśli nie chcesz, aby pasek przewijania pasował do ekranu, po prostu zmień wartość 10 na 0
Pasek przewijania pojawi się, jeśli zawartość nie pasuje do ekranu.
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-04-19 22:21:26
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 świetnie! :)
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;
}
}
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-01-29 13:36:46
Dla Sticky Footer używamy dwóch DIV's w HTML dla podstawowego efektu sticky footer. Napisz tak:
HTML
<div class="container"></div>
<div class="footer"></div>
CSS
body,html {
height:100%;
}
.container {
min-height:100%;
}
.footer {
height:40px;
margin-top:-40px;
}
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-04-19 22:23:06
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;
}
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-02-25 07:18:44
Cóż znalazłem mix navbar-inner i 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>
To wydaje się dobre i działa dla mnie
Zobacz przykład w Fiddle
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-13 07:23:25
To zadziałało dla mnie idealnie.
Dodaj tę klasę navbar-fixed-bottom do stopki.
<div class="footer navbar-fixed-bottom">
Użyłem go tak:
<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>
I ustawia się na dole na całej szerokości.
Edit: to ustawi stopkę na zawsze widoczną, to coś, co musisz wziąć pod uwagę.
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-11-16 14:48:37
Musisz zawinąć .container-fluid div, aby Twoja lepka stopka zadziałała, brakuje również niektórych właściwości na twojej klasie .wrapper. Spróbuj tego:
Usuń padding-top:70px z tagu body i dodaj go do .container-fluid w następujący sposób:
.wrapper > .container-fluid {
padding-top: 70px;
}
Musimy to zrobić, ponieważ przesunięcie body w dół w celu dostosowania paska nawigacyjnego kończy się przesunięciem stopki nieco dalej (70px dalej) za viewport, dzięki czemu otrzymujemy pasek przewijania. Uzyskujemy lepsze wyniki dzięki div .container-fluid zamiast tego.
Następnie musimy usunąć .wrapper klasę poza .container-fluid div I zawinąć #main div z nim, tak:
<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 być poza .wrapper div więc usuń ją z `.wrapper div i umieść go na zewnątrz, w ten sposób:
<div class="wrapper">
....
</div>
<footer class="container-fluid">
....
</footer><!--END .row-fluid-->
Po tym wszystkim, prawidłowo przesuń stopkę bliżej klasy .wrapper, używając ujemnego marginesu, tak:
.wrapper {
min-height: 100%;
height: auto !important; /* ie7 fix */
height: 100%;
margin: 0 auto -43px;
}
I to powinno zadziałać, choć prawdopodobnie będziesz musiał zmodyfikować kilka inne rzeczy, które sprawiają, że działa, gdy ekran jest zmieniany, jak resetowanie wysokości w klasie .wrapper, Jak tak:
@media (max-width:480px) {
.wrapper {
height:auto;
}
}
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
2012-04-11 14:17:21
Jest to właściwy sposób, aby to zrobić z Twitter Bootstrap i Nowy navbar-fixed-bottom class: (nie masz pojęcia, jak długo 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>
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
2013-02-06 18:09:18
Odpowiedź HenryW jest dobra, chociaż potrzebowałem kilku poprawek, aby to działało tak, jak chciałem. W szczególności dotyczy to również:
- unikanie "skoczności" przy ładowaniu strony przez zaznaczenie niewidoczne i ustawienie widoczne w javascript
- radzenie sobie z przeglądarką zmienia z wdziękiem
- dodatkowo ustawienie stopki tworzy kopię zapasową strony, jeśli przeglądarka staje się mniejsza, a stopka staje się większa niż Strona
- Poprawki funkcji wysokości
Oto co mi się udało 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;
});
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-05-23 12:18:30
W najnowszej wersji Bootstrap 4-alpha, udało mi się to zrobić za pomocą klasy .fixed-bottom.
<div class="fixed-bottom"></div>
Oto jak go używam ze stopką:
<footer class="footer fixed-bottom container">
<hr>
<p>© 2017 Company, Inc.</p>
</footer>
Więcej informacji można znaleźć w umieszczenie dokumentacja tutaj .
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-09-10 18:32:18
Użyj komponentu navbar i dodaj .navbar-fixed-bottom class:
<div class="navbar navbar-fixed-bottom"></div>
Dodaj ciało
{ padding-bottom: 70px; }
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-02-23 08:47:34
Aby Obsługiwać układy ograniczające szerokość, użyj następujących wskazówek, aby nie uzyskać zaokrąglonych rogów i aby pasek nawigacyjny był równo po bokach 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 nadpisać 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;
}
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
2013-08-15 19:50:10
Możesz użyć jQuery do obsługi tego:
$(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();
});
});
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-06-18 06:32:04
Najprostszą techniką jest prawdopodobnie użycie Bootstrap navbar-static-bottom w połączeniu z ustawieniem głównego kontenera div za pomocą height: 100vh (new CSS3 view port percentage). Spowoduje to spłukanie stopki do dołu.
<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">© Footer4U</p>
</div>
</footer>
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-06-29 20:19:58
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;
}
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-08 16:09:34
#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 zawijania.
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}
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
2013-07-20 11:49:47
/ Align = "left" / :
html {
position: relative;
min-height: 100%;
padding-bottom:90px;
}
body {
margin-bottom: 90px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 90px;
}
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-04-17 20:38:10
Wygląda na to, że height:100% 'Łańcuch' jest łamany w div#main. Spróbuj dodać do niego height:100%, a to może zbliżyć cię do celu.
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
2012-04-11 07:55:37
Tutaj znajdziesz podejście w HAML ( http://haml.info ) z paskiem nawigacyjnym na górze i stopką na dole 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
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-06-27 10:18:39
To proste.
footer {
bottom: 0;
position: absolute;
}
Może być również konieczne przesunięcie wysokości stopki przez dodanie margin-bottom równoważnej wysokości stopki do body.
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-09-30 21:18:57
Oto przykład użycia 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>
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-10 17:41:21
Tak robi to bootstrap:
Http://getbootstrap.com/2.3.2/examples/sticky-footer.html
Po prostu użyj źródła strony i powinieneś być w stanie zobaczyć. Nie zapomnij o <div id="wrap"> i topie.
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-05 23:16:52
Inne możliwe rozwiązanie, po prostu za pomocą 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;
}
}
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 10:59:01
Użyj poniższej klasy, aby przesunąć ją do ostatniej linii strony, a także do jej środka.
Jeśli używasz ruby on rails HAML page możesz skorzystać z poniższego kodu.
%footer.card.text-center
Pls nie zapomnij użyć twitter bootstrapp
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-05-28 11:36:51