Footer mit dem Inhalt der Seite nach unten schieben

UnknownInnocent · 19. November 2018

Hallo, ich habe einen footer, bottom: 0; position: absolute; .... blablabla

Das Problem ist jetzt, dass der footer halt immer am Bildschirmrand unten klebt, auch wenn der Inhalt größer ist, als die Seite hoch. Wie mache ich es, dass der footer dann mit nach unten verschoben wird?

Code:

Code

<link rel="stylesheet" href="CSS/footer.css">

<!--FOOTER-->
<footer>
  <div class="footer">
    <div class="footer-content">

      <div class="footer-left">
        <img src="PIC/Icons/mittel/twitter.png" alt="Twitter" />
        <img src="PIC/Icons/mittel/facebook.png" alt="Twitter" />
        <img src="PIC/Icons/mittel/youtube.png" alt="Twitter" />

        <br><br> Website by Marcus Kornmann
      </div>

      <div class="footernav"  class="menu-footer">
        <ul>
          <li class="footersubelement"><a href="#about1">Partner</a></li>
          <li class="footersubelement"><a href="#about2">Regeln</a></li>
          <li class="footersubelement"><a href="#about3">Datenschutz</a></li>
          <li class="footersubelement"><a href="#about3">Impressum</a></li>
        </ul>
       </div>

    </div>
  </div>
</footer>

Alles anzeigen

Code

footer{
  background: rgba(33,33,33,1);
  color:white;
  height: 110px;
  bottom: 0;
  width: 100%;
  position: relative;
}

/* Legt Breite und Höhe der Navigationsleisten fest */
.footernav{
  width:100%;
  height:50px;
}

/* Stylet die obere Navigationsleiste, macht sie rechtsbündig (Die einzelnen Listenpunkte werden bearbeitet) */
.footernav li{
  float:right;
  list-style:none;
  padding:0 20px 0 20px;
  line-height:3;
}

.footernav a {
  color: white;
  text-decoration: none;
}

.footernav a:hover{
  color: rgb(191,191,191);
}

@media screen and (max-width: 1100px){
  .footernav{
    display:none;
  }
}

@media screen and (max-width: 750px) {
  .line{
    display:flex;
    flex-direction:column;
  }
  footer{
    font-size:80%;
  }
}

@media screen and (min-width: 751) {
  .line{
    display:flex;
    flex-direction:row;
  }
}


@media screen and (max-width: 750px) {
  .line{
    display:flex;
    flex-direction:column;
  }
    footer{
    font-size:80%;
  }
}


@media screen and (min-width: 751px) {
  .line{
    display:flex;
    flex-direction:row;
  }
}

.footer {
  max-width: 1500px;
  margin: auto;
}

.footer .footer-content{
  padding: 15px;
  padding-top: 25px;
}

.footer .footer-content img{
  margin-right: 20%;
}

.footer .footer-content .footer-left{
  float: left;
}

.menu-footer a{
  color: white;
  text-decoration: none;
}

.menu-footer a:hover{
  color: rgb(207,207,207);
  text-decoration: none;
}

Alles anzeigen

Vielen Dank für die Hilfe!

basti1012 · 19. November 2018

nur den Code vom footer zu posten bringt nicht sehr viel. Weiß doch keiner wie der rest aussieht. Wo ist den der footer bei dir ? Was sind seine Eltern ? Main ,body oder irgendein div ? Benutzt du flexbox ? Das sollteman schon wissen um dir genaue angaben machen zu können.

EDIT : Na gut Flex benutzt du wohl ,aber den rest sollte man besser auch wissen.

Axel · 19. November 2018

Hi - schau dir mal die Tutorials im HTML-Seminar dazu an:

https://www.html-seminar.de/search?q=sticky+footer

UnknownInnocent · 19. November 2018

Ich habe das ganze Projekt mal hochgeladen, zum posten wäre das bisschen viel (paar Bilder sind nicht da weil sonst zu viel Speicher benötigt würde)

Axel Diese Seite habe ich schon mal gesehen, bin damit aber nicht sonderlich weiter gekommen

basti1012 · 20. November 2018

kann das sein das du deine cache nicht gelöscht hast. Bei mir wird der Footer immer unten angezeigt außer der Content hat keinen Inhalt . Aber das läßt sich noch ändern. Du sagtest das dein footer immer am Rand klebt als wenn er fixed wäre ?.

Wie gesagt versuche doch mal cache zu löschen.

UnknownInnocent · 20. November 2018

Nene das ist schon richtig, der Footer soll halt aber auch ganz unten angezeigt werden, wenn die Seite keinen Content hat.

Wenn ich

Code

bottom: 0;
position: absolute;

mache, wird er auch immer ganz unten angezeigt. Das Problem ist dabei nur, dass der Footer immer am unteren Bildschirmrand ist, auch wenn der Content länger ist als der Bildschirm hoch. Der Footer sollte dann ja unter den Content rutschen, tut er aber nicht.

djheke · 20. November 2018

Mit Flexbox sollte es auch sehr einfach umzusetzen sein. Aber hier mal mit display:table. In Anlehnung von Axel's Tutorial.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Sticky Footer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">


<style type="text/css">


html, body   {
margin:0;
padding:0;
height: 100%;
}
html {
background:#444;
}
body {
display:table;
max-width:1300px;
width:100%;
margin:0 auto;
}
header {
background:#dae; border-bottom:1px solid #000;
}
section {
background:#dda;
display:table-row;
height:100%;
}


section:before {
content:"";
width:219px;
height:100%;
float:left;
-margin-left: 220px;
border-right:1px solid #000;
background:#ade;
}
section p.links {
float:left;
width:200px;
margin-left:-220px;


}
section p.rechts {
margin-left:220px;


}
footer {
background:#ed0;border-top:1px solid #000;
}
h1, p {
margin:0;
padding:10px;
}
</style>
</head>
<body>


<header>
<h1>Responsive Sticky Footer</h1>
</header>


<section>
<p class="links">linke seite</p>
<p class="rechts">rechte seite</p>
</section>


<footer>
<p>Sehr laaaaaaaaaaaaaaaaaaaaaaaaaaa  aaaaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaa aaaaaaa aaaaa aaanger Text im Footer</p>
<p>Sehr laaaaaaaaaaaaaaaaaaaaaaaaaaa  aaaaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaa aaaaaaa aaaaa aaanger Text im Footer</p>
</footer>


</body>
</html>

Alles anzeigen

Sempervivum · 20. November 2018

Versuche dieses CSS:

Code

        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

und dieses HTML:

Code

<body>
    <main contenteditable>
        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. 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. 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. 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. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet.
    </main>
    <footer>Der Fußbereich</footer>
</body>

Alles anzeigen

und prüfe, ob es dann das ist, was Du dir vorstellst.

(contenteditable nur, um das Verhalten leicht testen zu können.)

djheke · 20. November 2018

Einfacher geht's nun wirklich nicht! Suppi!

Footer mit dem Inhalt der Seite nach unten schieben

Jetzt mitmachen!

Teilen

Tags