Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Sticky-Footer erstellen“

der-tim

Nicht mehr ganz neu hier

Hallo zusammen,

für eine Website möchte ich gern einen Sticky-Footer erzeugen bzw. den Footer so formatieren, dass er grundsätzlich unten steht:
Der Footer soll nicht grundsätzlich unten am Browserfenster-Ende kleben, sondern wenn langer Text zum Scrollen da ist, auch erst nach dem Text folgen. Nur wenn der Inhalt sehr kurz ist soll der Footer unten am Browser-Ende angedockt werden.

Über position:absolute und bottom:0 würde es theoretisch gehen, jedoch schiebt sich dann der Footer (bei kleineren Bildschirmen) unter Umständen über den Header und das Dropdown-Menü. Mit position:sticky hatte ich keinen Erfolg.

Die Seite kann man sich im Monment.

Hat jemand einen Tipp für mich?

Vorab vielen Dank und viele Grüße!
 

G

Gelöschtes Mitglied 633957

Guest

Flexbox (CSS3) würde sich da meiner Meinung nach gut eignen.

Hier einmal ein kleines praktisches Beispiel...

sticky.html
HTML:
<!doctype html>
<html lang="de">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <title>Sticky Footer</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="sticky.css">

</head>
<body>

  <header>
    Hier der Header
  </header>

  <section>
    <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    </p>
    <p>
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    </p>
  </section>

  <footer>
   Hier der Footer<br>
   und noch mehr Footer
  </footer>

</body>
</html>

sticky.css

CSS:
/* Schrift von Google importieren */
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i&subset=latin-ext');

/* Seiten-Hintergrund, -Schriftarten und -Ränder festlegen */
html, body {
  font-family: 'Source Sans Pro', Helvetica, sans-serif;
  background: #ddd;
  padding: 0;
  margin: 0;
}

/* Umlauf und Ränder für alle (genannten/hier verwendeten) Elemente auf 0 setzen */
header, section, footer, p {
  padding: 0;
  margin: 0;
}

/* Header und Footer stylen (Umlauf, Farbe, Ausrichtung h/v zentriert) */
/* rem anstelle em damit sich die Angaben auf das Root-Element (html) beziehen */
body>header, body>footer {
  text-align: center;
  width: 100%;
  color: #fff;
  background: #777;
  padding: .5rem 0;
  margin: 0 auto;
}

/* Umlauf für p-Blöcke */
p {
  padding: .5rem;
}

/* Nutzung von Flexbox im body, direction = column da Standard row ist */
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Section stylen (ähnlich wie Header und Footer, mit Breite für li/re 2% Rand wenn größer 1em) */
/* flex-grow = 1, -shrink = 0, -basis = auto */
/* Footer an Browserrand oder an Section wenn Section body vh überschreitet */
section {
  display: block;
  width: 96%;
  color: #222;
  padding: 1rem;
  margin: 0 auto 0 auto;
  flex: 1 0 auto;
}

Vielleicht hilft es weiter!?
Einfach mal mit viel und wenig Text (innerhalb section) testen und mit der CSS Datei herumspielen.
 
Zuletzt bearbeitet von einem Moderator:

der-tim

Nicht mehr ganz neu hier

Vielen Dank euch beiden für die Antworten!

@owieortho: Der Link in deinem alten Post wird bei mir leider vom Antivirenprogramm als bösartig erkannt ...
Aber zusammen mit den Stichwortten des alten Posts sowie dem Beispiel von tynick konnte ich das Ziel erreichen:

In meinem Fall musste ich meinem Umklammernden #page "display: flex; flex-direction: column;" verpassen und meinem #content die Eigenschaft "flex: 1 0 auto;" und dafür mein vorheriges "display:table" auf "display:block" setzen bzw. sogar entfernen.

So klappt es, vielen Dank!!
 

owieortho

Aktives Mitglied

Mal im Archiv gesucht:
CSS:
Code:
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;}

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

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

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}



/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->

*/
/*
     FILE ARCHIVED ON 23:35:09 Oct 07, 2011 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 08:37:40 Jan 28, 2018.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
HTML:
HTML:
<div id="wrap">
    <div id="main">
    </div>
</div>
<div id="footer">
</div>
Howto: https://web.archive.org/web/2011100...tickyfooter.com/using-sticky-footer-code.html

O.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.880
Mitglieder
67.226
Neuestes Mitglied
Alec168
Oben