Mein Footer will nicht am Ende sein.


DerTrojaner

Mitglied
Hallo Community,

ich habe ein kleines Problem, auf meiner Seite will mein erstellter Footer nicht "überall" am Ende sein unter dem letzten Content was gepostet wird. Vielleicht kann mir jemand helfen.
Auf meinem Desktop Rechner, ist der footer ganz unten siehe screen. Und auf dem Ipad geht er im Content bereich durch [Siehe Roten Rahmen = Content]
HTML:
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="Javascript.js"></script>
<body>
<!---------------------------------------------------------------------------------->
  <div id="header">
    <div id="Date-Time">
      <?php
     
        echo "Hamm";
        echo " ";
        $tage = array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
        $tag = date("w");
        echo $tage[$tag];
        echo " ";
        setlocale(LC_TIME, "de_DE");
        $timestamp = time();
        $datum = date("d.m.Y - H:i:s", $timestamp);
        echo $datum;
      ?>
    </div>
  </div>
<!---------------------------------------------------------------------------------->
  <div id="container">
    <div class="box">
      <p> HALLO </p>
    </div>
  </div>
  <div id="footer"> Copyright 2020 © </div>
<!---------------------------------------------------------------------------------->

</body>
CSS:
#container{
  color: #ffffff;
  margin-top: 200px;
  width:100%;
  position:relative;
  float:left;
}

#footer {
  color:white;
  background-image: linear-gradient(to bottom, #01995f, #019059, #018653, #027d4e, #027448);
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  height:20px;
  width: 100%;
}
 
Zuletzt bearbeitet:

MrMurphy

Mitglied
basti hat das bereits richtig beschrieben.

Mit float und position ist so eine Darstellung nicht machbar. Außer halt mit einer genau definierten Browserfenstergröße und einem dazu passenden Inhalt.

Auch beim aktuellen HTML und CSS ist so eine Darstellung nicht direkt vorgesehen, da sie für Webseiten nicht erforderlich ist. Entsprechend findet sie sich auch nur auf ganz wenigen Webseiten, die zudem unbedeutend sind. So eine Seite zu erstellen ist eine schöne Fingerübung, im Endeffekt aber vollkommen überflüssig.

Mit Flexbox oder auch CSS-Grid lässt sich zumindest so eine Darstellung basteln. Dazu benötigst du dann aber wahrscheinlich mehr Hintergrundwissen als dein gezeigter Quelltext vermuten lässt.
 

DerTrojaner

Mitglied
hast du mal versucht den body ein min-height zu geben ?, in dein fall
min-height:calc(100vh - 20px); ?

Außerden würde ich dir raten auf Flexbox umzustellen CSS Flexible Box Layout Module - verschiedene Beispiele einzelner CSS3-Flexbox-Eigenschaften das würde einiges erleichtern und dir später viel ärger ersparen wenn du deine Seite voll hast und responsiv haben willst
HAbe ich gerade versucht bringt leider nichts, body wurde halt größer, aber Footer ist leider immer noch im Body, ich verstehe es aber nicht warum. Habe ja den Footer nach dem COntainer in HTML eingefügt, somit sollter er ja unterhalb sein.
 

DerTrojaner

Mitglied
HTML:
<div id="container">
    <div class="box">
       <h3>Box1</h3>
          TEST
    </div>
  
<!---------------------------------------------------------------------------------->
    <div class="box">
       <h3>Box2</h3>
           TEST
     </div>
   <!---------------------------------------------------------------------------------->
    <div class="box">
       <h3>Box3</h3>
          TEST
    </div>
 <!---------------------------------------------------------------------------------->
   <div class="box">
      <h3>Box4</h3>
         TEST
   </div>
<!---------------------------------------------------------------------------------->
   <div class="box">
      <h3>Box5</h3>
         TEST
   </div>
</div>
 

Sempervivum

Erfahrenes Mitglied
Wie möchtest Du es denn? Soll der Footer fixiert sein und beim Scrollen immer sichtbar? Oder soll er nur, wenn die Inhalte das Browserfenster nicht ganz ausfüllen, am unteren Fensterrand hängen und beim Scrollen mit nach oben gehen?
 

DerTrojaner

Mitglied
Wie möchtest Du es denn? Soll der Footer fixiert sein und beim Scrollen immer sichtbar? Oder soll er nur, wenn die Inhalte das Browserfenster nicht ganz ausfüllen, am unteren Fensterrand hängen und beim Scrollen mit nach oben gehen?
Ich will das mein Footer Immer am Ende der Seite ist, egal ob wenig oder viel Inhalt auf der Seite ist, soll der Footer unten bleiben.
 

MrMurphy

Mitglied
Ich habe das so verstanden, dass DerTrojaner einen Footer will, der sich bei wenig Inhalt mindestens am unteren Ende des Browserfensters befindet. Wenn der Platz dafür nicht reicht, sei es weil der Inhalt dafür zu groß ist oder weil das Fenster kleiner wird, soll der Footer trotzdem unterhalb des Inhalts bleiben und halt außerhalb des Blickfelds rutschen, bis er durch Scrollen wieder sichtbar ist.

Dafür gibt es wie bereits geschrieben keine direkte HTML / CSS-Lösung. Mit Flexbox oder CSS-Grid kann man sich etwas basteln. Dafür gibt es unterschiedliche Ansätze, die alle unter dem inofiziellen Begriff "Sticky Footer" zusammengefasst werden. Danach kann DerTrojaner ja mal suchen.
 
Zuletzt bearbeitet:

Neue Beiträge