Wie schaffe ich es, dass meine Website-Fußzeile immer unten auf der Seite ist (aber nicht klebrig)? [abgeschlossen]

Ich bin ziemlich gut darin, Dinge zum Laufen zu bringen, da ich einen Programmierhintergrund habe, aber mir fehlt die Design-/Visualabteilung. Ich baue eine Website für einen Freund und eines der Dinge, die er möchte, ist eine Fußzeile am Ende jeder Seite mit ein paar nützlichen Links. Wie auch immer, wenn die Seite ziemlich viel Inhalt hat, sieht sie gut aus, immer am unten auf der Seite, aber wenn nicht so viel auf der Seite ist, erscheint es dort, wo der Inhalt aufhört und die Seite nach oben schneidet, mit einer großen unansehnlichen Lücke darunter.

Ich habe versucht, nach ein paar Tutorials zu suchen, aber die, die ich gefunden habe, waren entweder für klebrige Fußzeilen, die immer auf dem Bildschirm blieben, oder waren (meiner Meinung nach) schlecht erklärt.

Ich habe versucht, min-height zu verwenden, aber wenn das Fenster größer als min height ist, bekomme ich immer noch die unansehnliche Lücke. Gibt es dafür einen „richtigen“ Weg?

Dies ist möglicherweise besser für SO geeignet, da es sich um eine codebezogene Frage handelt.
Dies ist ein CSS-„Bug“ und hat mit seiner Unfähigkeit zur vertikalen Streckung zu tun. Im Allgemeinen wird der Hintergrund mit einem anderen Element vorgetäuscht, aber manchmal müssen Sie weniger ausgefallene Tricks anwenden. Wie Wayne erwähnt, sollten Sie dies stattdessen in SO fragen, wenn Sie Ihren Code teilen.
Ich habe überlegt, auf welcher SE-Site ich das posten soll, aber ich werde sie fragen :)
Haben Sie versucht height:100%, den Inhalt bis zur Fußzeile zu erweitern?
Dies ist definitiv eine SO-Frage, wie @WayneWerner sagte.
Der Wortlaut ist etwas unklar, siehe die Diskussion in meiner Antwort unten.
Aus gestalterischer Sicht ist dies (typischerweise) schlechtes Design. Websites haben keine Fußzeilen am unteren Rand des Browsers. Sie haben Fußzeilen am Ende des Inhalts.
Diese Frage scheint nicht zum Thema zu gehören, da es um die Implementierung geht (gehört zum Stapelüberlauf).
Ich habe gestern dieses Jsut verwendet: cssstickyfooter.com/using-sticky-footer-code.html Die Fußzeile bleibt am Ende einer nicht vollen Seite und bleibt unten am Ende des Inhalts, wenn der Inhalt über das Ende hinausgeht Fenster. Es klingt wie das, wonach Sie suchen.
Ich stimme dafür, diese Frage als nicht zum Thema gehörend zu schließen, da diese Frage zu StackOverflow gehört

Antworten (3)

Es gibt ein paar Ansätze, die Sie verfolgen könnten. Erstens, und meine Lieblingslösung, ist, htmldie gleiche Hintergrundfarbe wie die Unterseite meiner Fußzeile zu haben, damit der Übergang nicht so offensichtlich ist.

Sie können auch die vhEinheit verwenden, die 1 % der Höhe des aktuellen Ansichtsfensters entspricht. Es wird nicht von allen Browsern oder Geräten unterstützt, aber es macht einen guten Job, immer etwas am unteren Rand des Bildschirms (oder darunter) zu haben.

Dies ist eine Stapelüberlauffrage. Nicht Grafikdesign.

Um darauf zu antworten, müssen Sie jedoch Javascript verwenden. Berechnen Sie nach dem Rendern der Seite die Höhe des Darstellungsbereichs und dann die Höhe des Inhaltsbereichs. Verwenden Sie dann Javascript, um das Layout nach Bedarf anzupassen.

Ich würde das aber nicht empfehlen. Im Web befindet sich die Fußzeile normalerweise am unteren Rand des Inhalts – nicht am unteren Rand des Browsers. Hier erwarten die Leute es.

Dies ist möglich, aber ein bisschen schwierig. Was Sie brauchen, ist ein HTML mit 3 Divs:

<div id="page">
  <div id="main">
    <p>This is the contents on the page</p>
  </div>
</div>

<div id="footer">
    <p>stuff</p>
</div>

Dann folgendes CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#page {
    min-height: 100%;
}
#main {
    overflow: auto;
    padding-bottom: 100px;
}
#footer {
    background: #ccc;
    clear: both;
    height: 100px;
    margin-top: -100px;
    padding-top: 0;
    position: relative;
    width: 100%;
}

Die Idee ist, dass #page die Fußzeile nach unten spült. Die -100 Margin-Spitze bringt es ins Spielfeld. Und das #main hält die Fußzeile leer, wenn die Seite zu groß für den Inhalt ist. Wenn Sie Inhalte in ein div mit Polsterung in der Fußzeile einfügen, achten Sie darauf, die Fußzeile entsprechend zu kürzen.

Beispiel für jsbin

Edity Bearbeiten

Oder vielleicht möchten Sie es in diesem Fall umgekehrt. Machen Sie einfach html zur Farbe Ihrer Fußzeile, dann machen Sie die Kopfzeile weiß und lassen Sie die Fußzeile größtenteils normal sein.

Alternatives Beispiel für jsbin

Das ist gut, aber es ist eine klebrige Fußzeile. Anscheinend ist das ein Problem, das auf der Frage basiert. Der Benutzer scheint nicht zu wollen, { min-height: 100%; }es sei denn, der Inhalt ist größer als die Bildschirmhöhe (siehe letzte Fragezeile).
@Scott nein, ich denke, er meint, wenn Sie viel Text auf dem Bildschirm haben, muss der Text die Fußzeile nach unten drücken. Wenn Sie viel Text eingeben, wird die klebrige Fußzeile weggeschoben. Könnte falsch sein.
Nicht sicher. Ich lese es so , dass ich die Lücke nicht will, wenn nicht genug Inhalt vorhanden ist, um die Seite zu füllen ... meine Interpretation .... Grundsätzlich jquery, um eine klebrige Fußzeile zu klonen und zu erstellen, aber nur , wenn die Fußzeile unter der Fensterhöhe liegt.
Nun, was ist das Problem damit? Nur jede Webseite tut dies. Vielleicht möchte er, dass die Fußzeile zu 100 % vergrößert wird?
Ich sage nicht, dass es ein Problem ist. Der Benutzer, der die Frage stellt, ist.
@Scott Umgekehrt dann?
Meine Interpretation war, dass das OP nicht möchte, dass sich die Fußzeile über den unteren Rand des Fensters erhebt (wodurch eine Lücke (darunter) entsteht), sondern dass sie von unten verschoben wird, wenn der Inhalt lang ist. Ihre Antwort, die von cssstickyfooter.com/using-sticky-footer-code.html kam, ist das, wonach er sucht. Ich habe es gerade benutzt.
Wie schaffe ich es, dass meine Website-Fußzeile immer unten auf der Seite ist (aber nicht klebrig)? [abgeschlossen]
AntwortenHierDatenschutz-Bestimmungen1y, 0v