Wie sorgt man dafür, dass die Fußzeile am Ende einer Webseite bleibt?
https://stackoverflow.com/questions/42294
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich habe ein einfaches zweispaltiges Layout mit einer Fußzeile, die sowohl das rechte als auch das linke Div in meinem Markup löscht.Mein Problem ist, dass ich es nicht schaffe, die Fußzeile in allen Browsern am Ende der Seite anzuzeigen.Es funktioniert, wenn der Inhalt die Fußzeile nach unten drückt, aber das ist nicht immer der Fall.
Aktualisieren:
In Firefox funktioniert es nicht richtig.Ich sehe einen Streifen Hintergrundfarbe unter der Fußzeile, wenn auf der Seite nicht genügend Inhalt vorhanden ist, um die Fußzeile ganz nach unten im Browserfenster zu verschieben.Leider ist dies der Standardzustand der Seite.
Lösung
So erhalten Sie eine Sticky-Fußzeile:
Habe einen
<div>mitclass="wrapper"für Ihre Inhalte.Rechts Vor Die Schließung
</div>deswrapperStelle das<div class="push"></div>.Rechts nach Die Schließung
</div>deswrapperStelle das<div class="footer"></div>.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
Andere Tipps
Verwenden Sie CSS-vh-Einheiten!
Der wahrscheinlich naheliegendste und unkomplizierteste Weg, eine klebrige Fußzeile zu erstellen, wäre die Verwendung des neuen CSS-Ansichtsfenstereinheiten.
Nehmen Sie zum Beispiel das folgende einfache Markup:
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>
Wenn die Kopfzeile beispielsweise 80 Pixel hoch und die Fußzeile 40 Pixel hoch ist, können wir unsere Sticky-Fußzeile erstellen mit einer einzigen Regel zum Inhaltsbereich:
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
}
Was bedeutet:sei die Höhe des Inhalts-Divs mindestens 100 % der Höhe des Ansichtsfensters abzüglich der kombinierten Höhen von Kopf- und Fußzeile.
Das ist es.
* {
margin:0;
padding:0;
}
header {
background: yellow;
height: 80px;
}
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
background: pink;
}
footer {
height: 40px;
background: aqua;
}<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>...und so funktioniert derselbe Code mit vielen Inhalten im Content-Div:
* {
margin:0;
padding:0;
}
header {
background: yellow;
height: 80px;
}
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
background: pink;
}
footer {
height: 40px;
background: aqua;
}<header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
This is my footer
</footer>Hinweis:
1) Die Höhe der Kopf- und Fußzeile muss bekannt sein
2) Alte Versionen von IE (IE8-) und Android (4.4-) unterstützen keine Ansichtsfenstereinheiten.(kann ich benutzen)
3) Es gab einmal ein Problem mit Ansichtsfenstereinheiten innerhalb einer Berechnungsregel.Dies wurde tatsächlich behoben (siehe hier), also gibt es dort kein Problem.Wenn Sie jedoch aus irgendeinem Grund die Verwendung von Calc vermeiden möchten, können Sie dies umgehen, indem Sie negative Ränder und Auffüllungen mit der Boxgröße verwenden –
Etwa so:
* {
margin:0;padding:0;
}
header {
background: yellow;
height: 80px;
position:relative;
}
.content {
min-height: 100vh;
background: pink;
margin: -80px 0 -40px;
padding: 80px 0 40px;
box-sizing:border-box;
}
footer {
height: 40px;
background: aqua;
}<header>header goes here</header>
<div class="content">Lorem ipsum
</div>
<footer>
This is my footer
</footer>Sticky Footer mit display: flex
Lösung inspiriert von Philip Waltons klebrige Fußzeile.
Erläuterung
Diese Lösung ist gültig nur für:
- Chrome ≥ 21.0
- Firefox ≥ 20.0
- Internet Explorer ≥ 10
- Safari ≥ 6.1
Es basiert auf der flex Anzeige, Nutzung der flex-grow Eigenschaft, die es einem Element ermöglicht wachsen in beiden Höhe oder Breite (wenn das flow-direction ist auf beides eingestellt column oder row bzw.), um den zusätzlichen Platz im Container zu belegen.
Wir werden auch das nutzen vh Einheit, wo 1vh Ist definiert als:
1/100 der Höhe des Ansichtsfensters
Daher eine Höhe von 100vh Dies ist eine prägnante Möglichkeit, einem Element mitzuteilen, dass es sich über die gesamte Höhe des Ansichtsfensters erstrecken soll.
So würden Sie Ihre Webseite strukturieren:
----------- body -----------
----------------------------
---------- footer ----------
----------------------------
Damit die Fußzeile am unteren Rand der Seite haftet, soll der Abstand zwischen Text und Fußzeile so groß werden, dass die Fußzeile am unteren Rand der Seite platziert wird.
Daher lautet unser Layout:
----------- body -----------
----------------------------
---------- spacer ----------
<- This element must grow in height
----------------------------
---------- footer ----------
----------------------------
Implementierung
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.spacer {
flex: 1;
}
/* make it visible for the purposes of demo */
.footer {
height: 50px;
background-color: red;
}<body>
<div class="content">Hello World!</div>
<div class="spacer"></div>
<footer class="footer"></footer>
</body>Sie können damit spielen die JSFiddle.
Safari-Macken
Beachten Sie, dass Safari über eine verfügt fehlerhafte Umsetzung der flex-shrink Eigentum, Dadurch können Elemente um mehr als die Mindesthöhe verkleinert werden, die zum Anzeigen des Inhalts erforderlich wäre.Um dieses Problem zu beheben, müssen Sie Folgendes festlegen flex-shrink Eigenschaft explizit auf 0 setzen .content und das footer im obigen Beispiel:
.content { flex-shrink: 0; }
.footer { flex-shrink: 0; }
Du könntest benutzen position: absolute Gehen Sie wie folgt vor, um die Fußzeile unten auf der Seite zu platzieren. Stellen Sie dann jedoch sicher, dass Ihre beiden Spalten über die entsprechenden Werte verfügen margin-bottom damit sie nie von der Fußzeile verdeckt werden.
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
#content, #sidebar {
margin-bottom: 5em;
}
Hier ist eine Lösung mit jQuery, die wie ein Zauber funktioniert.Es prüft, ob die Höhe des Fensters größer als die Höhe des Körpers ist.Wenn dies der Fall ist, wird zum Ausgleich der obere Rand der Fußzeile geändert.Getestet in Firefox, Chrome, Safari und Opera.
$( function () {
var height_diff = $( window ).height() - $( 'body' ).height();
if ( height_diff > 0 ) {
$( '#footer' ).css( 'margin-top', height_diff );
}
});
Wenn Ihre Fußzeile bereits einen oberen Rand hat (z. B. 50 Pixel), müssen Sie den letzten Teil ändern für:
css( 'margin-top', height_diff + 50 )
Legen Sie das CSS für fest #footer Zu:
position: absolute;
bottom: 0;
Sie müssen dann eine hinzufügen padding oder margin bis zum Grund deines #sidebar Und #content passend zur Höhe von #footer oder wenn sie sich überschneiden, die #footer werde sie abdecken.
Außerdem hat IE6, wenn ich mich richtig erinnere, ein Problem damit bottom: 0 CSS.Möglicherweise müssen Sie eine JS-Lösung für IE6 verwenden (sofern Sie sich für IE6 interessieren).
Eine ähnliche Lösung wie @gcedo aber ohne dass ein Zwischeninhalt hinzugefügt werden muss, um die Fußzeile nach unten zu verschieben.Wir können einfach hinzufügen margin-top:auto in die Fußzeile und es wird an den unteren Rand der Seite verschoben, unabhängig von seiner Höhe oder der Höhe des darüber liegenden Inhalts.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
}
.content {
padding: 50px;
background: red;
}
.footer {
margin-top: auto;
padding:10px;
background: green;
}<div class="content">
some content here
</div>
<footer class="footer">
some content
</footer>Verwenden Sie die absolute Positionierung und den Z-Index, um mit den folgenden Schritten ein Sticky-Footer-Div in jeder Auflösung zu erstellen:
- Erstellen Sie ein Fußzeilen-Div mit
position: absolute; bottom: 0;und die gewünschte Höhe - Legen Sie den Abstand der Fußzeile fest, um Leerraum zwischen dem unteren Teil des Inhalts und dem unteren Rand des Fensters hinzuzufügen
- Erstellen Sie einen Container
divdas umhüllt den Körperinhalt mitposition: relative; min-height: 100%; - Fügen Sie dem Hauptinhalt eine untere Polsterung hinzu
divdas entspricht der Höhe plus Abstand der Fußzeile - Stellen Sie die ein
z-indexder Fußzeile größer als der Containerdivwenn die Fußzeile abgeschnitten ist
Hier ist ein Beispiel:
<!doctype html>
<html>
<head>
<title>Sticky Footer</title>
<meta charset="utf-8">
<style>
.wrapper { position: relative; min-height: 100%; }
.footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
.column { height: 2000px; padding-bottom: 300px; background-color: green; }
/* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */
</style>
</head>
<body>
<div class="wrapper">
<div class="column">
<span>hello</span>
</div>
<div class="footer">
<p>This is a test. This is only a test...</p>
</div>
</div>
</body>
</html>Versuchen Sie, ein Container-Div (mit overflow:auto) um den Inhalt und die Seitenleiste zu platzieren.
Wenn das nicht funktioniert, haben Sie Screenshots oder Beispiellinks, bei denen die Fußzeile nicht richtig angezeigt wird?
Eine Lösung wäre, die Mindesthöhe für die Boxen festzulegen.Leider scheint es so Es wird vom IE nicht gut unterstützt (Überraschung).
Keine dieser reinen CSS-Lösungen funktioniert ordnungsgemäß mit der dynamischen Größenänderung von Inhalten (zumindest unter Firefox und Safari), z. B. wenn Sie einen Hintergrund für das Container-Div und die Seite festgelegt haben und dann die Größe der Tabelle innerhalb des Divs ändern (durch Hinzufügen einiger Zeilen). Die Tabelle kann über den unteren Rand des gestalteten Bereichs hinausragen, d. h. Sie können die Hälfte der Tabelle in Weiß auf schwarzem Hintergrund und die Hälfte der Tabelle ganz in Weiß gestalten, da sowohl die Schriftfarbe als auch die Hintergrundfarbe weiß ist.Bei Themeroller-Seiten lässt sich das im Grunde nicht beheben.
Das mehrspaltige verschachtelte Div-Layout ist ein hässlicher Hack, und das Body/Container-Div mit 100 % minimaler Höhe zum Einkleben der Fußzeile ist ein hässlicherer Hack.
Die einzige Lösung ohne Skript, die auf allen Browsern funktioniert, die ich ausprobiert habe:eine viel einfachere/kürzere Tabelle mit thehead (für Kopfzeile)/tfoot (für Fußzeile)/tbody (tds für eine beliebige Anzahl von Spalten) und 100 % Höhe.Dies hat jedoch semantische und SEO-Nachteile zur Folge (tfoot muss vor tbody erscheinen).ARIA-Rollen können jedoch guten Suchmaschinen helfen.
CSS:
#container{
width: 100%;
height: 100vh;
}
#container.footer{
float:left;
width:100%;
height:20vh;
margin-top:80vh;
background-color:red;
}
HTML:
<div id="container">
<div class="footer">
</div>
</div>
Dies sollte ausreichen, wenn Sie nach einer reaktionsfähigen Fußzeile suchen, die am unteren Rand der Seite ausgerichtet ist und immer einen oberen Rand von 80 % der Höhe des Ansichtsfensters beibehält.
Viele der Antworten, die ich auf diese Frage gesehen habe, sind umständlich, schwer zu implementieren und ineffizient, also dachte ich, ich versuche es mal und überlege mir meine eigene Lösung, die nur ein kleines bisschen CSS und HTML ist
html,
body {
height: 100%;
margin: 0;
}
.body {
min-height: calc(100% - 2rem);
width: 100%;
background-color: grey;
}
.footer {
height: 2rem;
width: 100%;
background-color: yellow;
}<body>
<div class="body">test as body</div>
<div class="footer">test as footer</div>
</body>Dies funktioniert, indem man die Höhe der Fußzeile festlegt und dann mithilfe von CSS-Berechnung die minimale Höhe ermittelt, die die Seite haben kann, wenn die Fußzeile noch unten ist. Ich hoffe, das hilft einigen Leuten :)
Ich selbst hatte manchmal damit zu kämpfen und fand immer, dass die Lösung mit all diesen Divs ineinander eine chaotische Lösung war.Ich habe einfach ein bisschen damit herumgespielt und persönlich herausgefunden, dass das funktioniert und es sicherlich eine der einfachsten Möglichkeiten ist:
html {
position: relative;
}
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
Was mir daran gefällt, ist, dass kein zusätzliches HTML angewendet werden muss.Sie können dieses CSS einfach hinzufügen und dann Ihren HTML-Code wie immer schreiben
Mehrere Leute haben hier oben die Antwort auf dieses einfache Problem zusammengestellt, aber eines muss ich noch hinzufügen, wenn man bedenkt, wie frustriert ich war, bis ich herausgefunden habe, was ich falsch gemacht habe.
Wie bereits erwähnt, ist dies der einfachste Weg, dies zu tun.
html {
position: relative;
min-height: 100%;
}
body {
background-color: transparent;
position: static;
height: 100%;
margin-bottom: 30px;
}
.site-footer {
position: absolute;
height: 30px;
bottom: 0px;
left: 0px;
right: 0px;
}
Die Eigenschaft, die in Beiträgen jedoch nicht erwähnt wird, vermutlich weil sie normalerweise standardmäßig voreingestellt ist, ist die Position:statisch auf dem Body-Tag.Relative Positionierung funktioniert nicht!
Mein WordPress-Theme hatte die standardmäßige Textanzeige überschrieben und es verwirrte mich für eine unerträglich lange Zeit.
Ein alter Thread, den ich kenne, aber wenn Sie nach einer reaktionsfähigen Lösung suchen, hilft dieser jQuery-Zusatz:
$(window).on('resize',sticky);
$(document).bind("ready", function() {
sticky();
});
function sticky() {
var fh = $("footer").outerHeight();
$("#push").css({'height': fh});
$("#wrapper").css({'margin-bottom': -fh});
}
Den vollständigen Leitfaden finden Sie hier: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/
Ich habe eine sehr einfache Bibliothek erstellt https://github.com/ravinderpayal/FooterJS
Es ist sehr einfach in der Anwendung.Rufen Sie nach dem Einbinden der Bibliothek einfach diese Codezeile auf.
footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));
Fußzeilen können dynamisch geändert werden, indem die obige Funktion mit einem anderen Parameter/einer anderen ID aufgerufen wird.
footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));
Hinweis: – Sie müssen kein CSS ändern oder hinzufügen.Die Bibliothek ist dynamisch, was bedeutet, dass die Position der Fußzeile auch dann zurückgesetzt wird, wenn die Bildschirmgröße nach dem Laden der Seite geändert wird.Ich habe diese Bibliothek erstellt, weil CSS das Problem für eine Weile löst, aber wenn sich die Anzeigegröße erheblich ändert, vom Desktop zum Tablet oder umgekehrt, überlappen sie entweder den Inhalt oder bleiben nicht mehr hängen.
Eine andere Lösung sind CSS-Medienabfragen. Sie müssen jedoch manuell verschiedene CSS-Stile für unterschiedliche Bildschirmgrößen schreiben, während diese Bibliothek ihre Arbeit automatisch erledigt und von allen grundlegenden Browsern unterstützt wird, die JavaScript unterstützen.
BearbeitenCSS-Lösung:
@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
/* For mobile phones: */
#footer {
width: 100%;
position:fixed;
bottom:0;
}
}
Wenn nun die Höhe der Anzeige größer ist als die Länge Ihres Inhalts, fixieren wir die Fußzeile unten. Ist dies nicht der Fall, wird sie automatisch ganz am Ende der Anzeige angezeigt, da Sie scrollen müssen, um sie anzuzeigen.
Und es scheint eine bessere Lösung als JavaScript/Bibliothek zu sein.
Ich hatte vorher kein Glück mit den auf dieser Seite vorgeschlagenen Lösungen, aber dann hat dieser kleine Trick endlich funktioniert.Ich werde es als eine weitere mögliche Lösung hinzufügen.
footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
Flexbox-Lösung
Für natürliche Kopf- und Fußzeilenhöhen wird das Flex-Layout bevorzugt.Diese Flex-Lösung wurde in modernen Browsern getestet und funktioniert tatsächlich :) in IE11.
HTML
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
CSS
html {
height: 100%;
}
body {
height: 100%;
min-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
flex-shrink: 0;
}
header,
footer {
flex: none;
}
Für mich ist es am schönsten, sie (die Fußzeile) anzuzeigen, indem sie unten bleibt, aber den Inhalt nicht ständig verdeckt:
#my_footer {
position: static
fixed; bottom: 0
}
jQuery CROSS BROWSER BENUTZERDEFINIERTES PLUGIN - $.footerBottom()
Oder verwenden Sie jQuery wie ich und stellen Sie die Höhe Ihrer Fußzeile auf ein auto oder zu fix, was auch immer Sie möchten, es wird trotzdem funktionieren.Dieses Plugin verwendet jQuery-Selektoren. Damit es funktioniert, müssen Sie die jQuery-Bibliothek in Ihre Datei einbinden.
So führen Sie das Plugin aus.Importieren Sie jQuery, kopieren Sie den Code dieses benutzerdefinierten jQuery-Plugins und importieren Sie ihn nach dem Import von jQuery!Es ist sehr einfach und grundlegend, aber wichtig.
Wenn Sie dies tun, müssen Sie nur diesen Code ausführen:
$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer"
// by setting target to {target:"div.footer"}
Es ist nicht erforderlich, es innerhalb des Dokument-Ready-Ereignisses zu platzieren.So wie es ist, wird es gut laufen.Es berechnet die Position Ihrer Fußzeile neu, wenn die Seite geladen wird und wenn die Fenstergröße geändert wird.
Hier ist der Code des Plugins, den Sie nicht verstehen müssen.Man muss nur wissen, wie man es umsetzt.Es erledigt die Arbeit für Sie.Wenn Sie jedoch wissen möchten, wie es funktioniert, schauen Sie sich einfach den Code an.Ich habe Kommentare für Sie hinterlassen.
//import jQuery library before this script
// Import jQuery library before this script
// Our custom jQuery Plugin
(function($) {
$.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
var defaults = {
target: "footer",
container: "html",
innercontainer: "body",
css: {
footer: {
position: "absolute",
left: 0,
bottom: 0,
},
html: {
position: "relative",
minHeight: "100%"
}
}
};
options = $.extend(defaults, options);
// JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
$(options.target).css({
"position": options.css.footer.position,
"left": options.css.footer.left,
"bottom": options.css.footer.bottom,
});
$(options.container).css({
"position": options.css.html.position,
"min-height": options.css.html.minHeight,
});
function logic() {
var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
$(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
$(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
};
// DEFINE WHEN TO RUN FUNCTION
$(window).on('load resize', function() { // Run on page loaded and on window resized
logic();
});
// RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
// return this.each(function() {
// this.checked = true;
// });
// return this;
};
})(jQuery); // End of plugin
// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5/* Set your footer CSS to what ever you like it will work anyway */
footer {
box-sizing: border-box;
height: auto;
width: 100%;
padding: 30px 0;
background-color: black;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
<div class="content">
<header>
<nav>
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</nav>
</header>
<section>
<p></p>
<p>Lorem ipsum...</p>
</section>
</div>
<footer>
<p>Copyright 2009 Your name</p>
<p>Copyright 2009 Your name</p>
<p>Copyright 2009 Your name</p>
</footer>Die Flex-Lösungen funktionierten bei mir soweit, dass sie die Fußzeile klebrig machten, aber leider führte die Umstellung des Textkörpers auf die Verwendung des Flex-Layouts dazu, dass sich einige unserer Seitenlayouts änderten, und zwar nicht zum Besseren.Was letztendlich für mich funktionierte, war:
jQuery(document).ready(function() {
var fht = jQuery('footer').outerHeight(true);
jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");
});
Ich habe dies aus der Antwort von ctf0 unter erhalten https://css-tricks.com/pair-takes-sticky-footer/
Seit der Netz Die Lösung wurde noch nicht vorgestellt, hier ist sie, mit nur zwei Erklärungen für die übergeordnetes Element, wenn wir das nehmen height: 100% Und margin: 0 selbstverständlich:
html, body {height: 100%}
body {
display: grid; /* generates a block-level grid */
align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
margin: 0;
}
.content {
background: lightgreen;
/* demo / for default snippet window */
height: 1em;
animation: height 2.5s linear alternate infinite;
}
footer {background: lightblue}
@keyframes height {to {height: 250px}}<div class="content">Content</div>
<footer>Footer</footer>Die Elemente sind gleichmäßig innerhalb des Ausrichtungsbehälters entlang der Kreuzachse verteilt.Der Abstand zwischen jedem Paar benachbarte Gegenstände ist gleich.Der erste Gegenstand ist spütig mit der Hauptstartkante und der letzte Gegenstand ist bündig mit der Hauptkante.
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
border: 3px solid #73AD21;
} <body style="height:1500px">
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>