Footer geht nur ans Fensterende

[Tomete]

Grüsse.

Ich habe da ein zielmiches Problem mit meiner HTML-Seite. Und zwar will ich den Footer unten platzieren, wo er auch hingehört, allerdings passt er sich nicht an die Länge der Seite, sondern an die Größe des Fensters an. Wenn der Text länger ist, als das Browserfenster reicht echt nervig. Ich weiß nicht, wie ich das noch lösen soll.

CSS-Code meines Footers:

position: absolute;
width: 100%;
color: white;
text-align: center;
vertical-align: bottom;
font-size: 12pt;
bottom: 8px;
padding:1em;
margin: 2px;
z-index: 4;

[MrMurphy1]

Hallo,

du suchst "sticky footer".

Dazu gibt es im Internet massenhaft Anleitungen. Welche für dich am besten geeigent ist musst du selbst entscheiden. Das hängt ja auch von deinem restlichen Quellcode ab.

Als Beispiel mal

http://www.cssstickyfooter.com/de/

Ein Sticky Footer klebt am unteren Fensterrand, sofern der Inhalt niedriger als die Fensterhöhe ist. Wird der Inhalt höher bleibt der Footer unterhalb des Inhalts und wird sichtbar, wenn zum Ende der Seite gescrollt wird.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Dazu gibt es im Internet massenhaft Anleitungen.

Massenhaft veraltete. Aber auch aktuelle. Kuckst du Tab Atkins: Present and Future of CSS Layout ab 27:13.

Liest du eigentlich auch andere Antworten in Threads, an denen du beteiligt bist? Genau das habe ich oxo888oxo erst gestern gesagt (auch wenn die Frage eine andere war).

Welche für dich am besten geeigent ist musst du selbst entscheiden.

Die von dir gezeigte ist eher nicht geeignet, weil sie von einer festen Höhe des Footers ausgeht, die man aber nicht kennen kann.

LLAP 🖖

[Tomete]

Danke, hat aber beides nicht geklappt, wie gewollt. Das sieht nur so lange aus, wie es sollte, wie der Inhalt kleiner ist als die Höhe des Fensters. Aber der soll sich ja nicht ans Fenster, sondern an den Inhalt anpassen. Lustigerweise überlappt das Ding auch andere DIVs, wenn ich ihn als "relative" einstelle.

[Gunnar Bittersmann]

@@Tomete

Danke, hat aber beides nicht geklappt, wie gewollt.

Was „beides“?

Lass mal sehen.

Das sieht nur so lange aus, wie es sollte, wie der Inhalt kleiner ist als die Höhe des Fensters.

BTW, nach meinem Sprachempfinden ist das Komma vor dem zweiten „wie“ richtig; das vor dem ersten „wie“ falsch (wie auch das oben bei „wie gewollt“).

LLAP 🖖

[Tomete]

Beides, war schlecht ausgedrückt. Das Problem liegt eben darin, dass der Browser nicht das Seitenende, sondern das Fensterende als "bottom" sieht. Habe jetzt auch versucht, auch wenn es keine elegante Lösung ist, einfach einen zusätzlichen div mit width: 100% und height: 100% zu machen und den Text vertikal unten auszurichten, aber irgendwie will der das auch nicht. Der Text steht da immer oben.

Es muss doch irgendwie gehen, auf jeder zweiten Seite ist das so, aber wenn ich auf "Element untersuchen" gehe hat der Footer auch kaum Eigenschaften...

[Gunnar Bittersmann]

@@Tomete

Beides, war schlecht ausgedrückt.

Ja. Kann sein, dass ich immer noch nicht weiß, was du willst.

Soll der Footer immer im Viewport^[1] zu sehen sein, auch wenn der Inhalt länger ist?

Oder soll der Footer imm unter dem Inhalt sein; aber an der unteren Viewportkante^[1:1], wenn der Inhalt kürzer ist?

„Lass mal sehen“ hast du geflissentlich ignoriert. Gemeint war ein Link zu deiner Seite.

LLAP 🖖

---

1. Viewport: das Innere des Browserfensters ↩︎ ↩︎

[MrMurphy1]

Hallo

Ohne deine Seite zu kennen ist eine konkrete Hilfe schlicht nicht möglich.

Danke, hat aber beides nicht geklappt,

Auch mit solchen Aussagen können wir nichts anfangen. Wir wissen ja nicht welche Fehler du machst.

Gruss

MrMurphy

[Tomete]

Ich habe die Seite noch nicht hochgeladen, da sie ja noch am Anfang steht. Ein Bild hätte ich hier:

http://de.tinypic.com/view.php?pic=fpckcz&s=8#.VdHIYLSkXMA

Ist jetzt leer, da ich den Text schon wieder gelöscht habe. Hier noch mal die verwendeten CSS-Codes:

.header { position: absolute; width: 100%; left: 0px; height: 300px; background-image: url(images/header.png); z-index: 1; }

.contend { position: relative; height:auto; Top: 330px; margin-bottom: 50px; min-height: 50%; float: middle; left: 25%; padding: 12px; width: 1000px; background-color: white; font-family: Arial; z-index: 2; border-radius: 15px; }

.footer { position: absolute; width: 100%; color: white; text-align: center; vertical-align: bottom; font-size: 12pt; bottom: 8px; padding:1em; margin: 2px; z-index: 4; }

Naja, und der Footer ist nur so lange da, wo er sein soll, wie der Inhalt kürzewr als die Höhe des Browserfensters ist. Geht der Inhalt darüber hinaus, dann ist der Footer am unteren Ende des Browserfensters und die Seite geht "unter dem Footer" weiter.

[Gunnar Bittersmann]

@@Tomete

Ein Bild hätte ich hier:

Auf einem Bild sieht man vielleicht, was passiert, aber nicht warum. Zur Beantwortung von Fragen ist letzteres unabdingbar.

Ist jetzt leer, da ich den Text schon wieder gelöscht habe. Hier noch mal die verwendeten CSS-Codes:

CSS-Code ohne zugehöriges Markup bringt auch keinen Erkenntnisgewinn.

Und nein, niemand möchte dein Problem nachbauen.

Naja, und der Footer ist nur so lange da, wo er sein soll, wie der Inhalt kürzewr als die Höhe des Browserfensters ist. Geht der Inhalt darüber hinaus, dann ist der Footer am unteren Ende des Browserfensters und die Seite geht "unter dem Footer" weiter.

Ich werd aus deinem Gestammel deiner Beschreibung nicht schlau. Ich hatte zwei einfache Fragen gestellt. Kannst du die einfach beantworten?

LLAP 🖖

[Tomete]

Ich kann jetzt (noch) keinen Link zur Seite geben, da sie eben noch nicht online ist. Ich kann höchstens mal schnell die Sources zum Download berereitstellen. Und wie gesagt, der Footer nimmt das untere Ende des Fensters als "bootom" und nicht das untere Ende der Seite. Der Aufbau ist ja so gesehen noch recht simpel, also Fehler leicht zu finden...

http://www.file-upload.net/download-10846726/Seite.zip.html

[MrMurphy1]

Hallo,

dein bisheriger Quelltext ist leider für einen Sticky Footer nicht geeignet. Vielleicht hilft dir ein Beispiel weiter wie ich die Seite erstellen würde. Größen, Abstände, Farben u.s.w. können noch angepasst werden.

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Sticky Footer 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   /* Hack für IE 10 und IE 11 */
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      html {
         height: 100%;
      }
   }
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         background: linear-gradient(to bottom, #101010, #0c0c0c);
         height: 100%;
         min-height: 100vh;
         padding: 0;
         margin: 0;
         display: flex;
         flex-direction: column;
      }
      header {
         background: linear-gradient(to bottom, #fa0000, #120000);
         display: flex;
         justify-content: center;
      }
      nav {
         background-color: #F00;
         border: 2px solid black;
         border-radius: 1rem;
         padding: 0.2rem 8rem;
         margin: 4.5rem 0;
         display: flex;
      }
      a {
         text-decoration: none;
         color: yellow;
         padding: 0.3rem 0.5rem;
         border-right: 1px solid black;
         margin: 0;
      }
      a:last-child {
         border-right: none;
      }
      main {
         width: 80%;
         margin-left: 20%;
         flex: 1;
         -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */
      }
      article {
         background-color: white;
         padding: 0.5rem 1rem;
         border-radius: 0.5rem;
      }
      article h1 {
         text-align: center;
      }
      article p {
         border-top: 1px solid black;
         border-bottom: 1px solid black;
      }
      footer {
         text-align: center;
         color: white;
      }
      p {
      }
   }
   /* Vorlage zum Kopieren für Media-Query */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <header>
      <nav>
         <a href="#">xxx</a>
         <a href="#">xxx</a>
         <a href="#">xxx</a>
         <a href="#">xxx</a>
         <a href="#">xxx</a>
         <a href="#">xxx</a>
         <a href="#">xxx</a>
      </nav>
   </header>
   <main>
      <article>
         <h1>Start</h1>
         <p>Hier kommt auf jede Seite dann der Inhalt hin. Wird dieser zu lang, wir er allerdings vom Footer überlappt.</p>
      </article>
   </main>
   <footer>
      <p>Hier ist dann der Footer</p>
   <footer>
</body>
</html>

Gruss

MrMurphy

[Tomete]

Ist zwar schade, dass ich den Quelltext jetzt warscheinlich umsonst geschrieben habe, aber damit klappt es jetzt endlich. Vielen, vielen Dank. Aber mit dem neuen HTML5-Sachen kenne ich mich nicht so aus, aber ich kann den Style doch weiterhin in eine seperate CSS-Datei packen, wegen der Übersicht, oder geht das nicht?

[MrMurphy1]

Hallo

aber ich kann den Style doch weiterhin in eine seperate CSS-Datei packen, wegen der Übersicht, oder geht das nicht?

Ja, das ist kein Problem. Ich habe daraus nur eine Datei gemacht, damit Interessierte einfach den gesamten Quelltext kopieren können und ein funktionierendes Ergebnis erhalten.

Außerdem haben Anfänger immer wieder Schwierigkeiten einen korrekten head-Bereich zu erstellen und es mich nervt, wenn ich dann den Vorwurf erhalten, mein Beispiel funktioniert nicht.

So funktioniert mein Beispiel, Interessierte haben schnell ein Ergebnis und können sich überlegen, ob sie daraus Teile oder alles für sich nutzen wollen.

Gruss

MrMurphy