# Mein Footer will nicht am Ende sein.



## DerTrojaner (12. Februar 2020)

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]
https://ibb.co/NT9t69Ghttps://ibb.co/Czmy4mj

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


```
#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%;
}
```


----------



## basti1012 (12. Februar 2020)

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


----------



## MrMurphy (13. Februar 2020)

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 (13. Februar 2020)

basti1012 hat gesagt.:


> 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 (13. Februar 2020)

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


----------



## DerTrojaner (13. Februar 2020)

Habe es nun geschafft, dass der Footer unter der box ist, aber leider ist er nicht unten von der Seite.


----------



## Sempervivum (13. Februar 2020)

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 (13. Februar 2020)

Sempervivum hat gesagt.:


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


----------



## Sempervivum (13. Februar 2020)

Jetzt bin ich genau so klug wie vorher 
So wie in dieser Demo, die MrMurphy früher mal gepostet hat?
https://webentwicklung.ulrichbangert.de/flex-scrollable.htmlVerringere die Höhe des Browserfensters bis der Scrollbalken rechts auftaucht.


----------



## MrMurphy (13. Februar 2020)

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.


----------

