Erledigt - Sticky-Footer erstellen

der-tim · 27.01.2018

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!

Gelöschtes Mitglied 633957 · 27.01.2018

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.

owieortho · 27.01.2018

siehe einen früheren Post von mir: https://www.psd-tutorials.de/forum/posts/1638026/
O.

der-tim · 27.01.2018

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 · 28.01.2018

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:

<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.