Ich bin im Allgemeinen mit der Technik des Spülens einer Fußzeile mit CSS vertraut.
Aber ich habe einige Schwierigkeiten, diesen Ansatz für Twitter-Bootstrap, wahrscheinlich aufgrund der Tatsache, dass Twitter-Bootstrap ist in der Natur reagieren zu arbeiten. Mit Twitter Bootstrap bin ich nicht in der Lage, die Fußzeile an den unteren Rand der Seite mit dem Ansatz in der obigen Blog-Post beschrieben bündig zu bekommen.
Dies ist nun in Bootstrap 2.2.1 enthalten.
Bootstrap 3.x
Verwenden Sie die Komponente navbar und fügen Sie .navbar-fixed-bottom Klasse:
<div class="navbar navbar-fixed-bottom"></div>Bootstrap 4.x
<div class="navbar fixed-bottom"></div>Vergessen Sie nicht, Folgendes hinzuzufügen body { padding-bottom: 70px; } sonst kann der Inhalt der Seite verdeckt werden.
Dokumente: http://getbootstrap.com/components/#navbar-fixed-bottom
Ich habe die Schnipsel gefunden ici funktioniert sehr gut für 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;
}
Ein funktionierendes Beispiel für Twitter Bootstrap NICHT KLEBENDE FUSSZEILE
<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>Version, die immer aktualisiert wird, wenn der Benutzer die Devtools öffnet oder die Größe des Fensters ändert.
<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>#footerWenn Sie die Bildlaufleiste nicht wünschen, wenn der Inhalt auf den Bildschirm passt, ändern Sie einfach den Wert von 10 auf 0
Die Bildlaufleiste wird eingeblendet, wenn der Inhalt nicht auf den Bildschirm passt.
Für Aufgeklebte Fußzeile wir verwenden zwei DIV's in der HTML-Datei für grundlegende klebrige Fußzeile Wirkung. Schreiben Sie so:
HTML
<div class="container"></div>
<div class="footer"></div>CSS
body,html {
height:100%;
}
.container {
min-height:100%;
}
.footer {
height:40px;
margin-top:-40px;
}
Auf der offiziellen Seite erfahren Sie, wie Sie dies umsetzen können:
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
Ich habe es gerade getestet und es FUNKTIONIERT GROSSARTIG :)
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>Der entsprechende CSS-Code lautet wie folgt:
/* 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;
}
} CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
