pixxma: Footer-Bereich soll mindestens am unteren Viewport-Ende stehen

Guten Morgen,

ich erstelle gerade eine Seite mit folgendem HTML5-Grundschema:

<!DOCTYPE html>  
<html>  
<head>  
   <meta charset=UTF-8>  
   <title>XYZ</title>  
   <link href=styles.css rel=stylesheet />  
</head>  
  
<body>  
  
<?php include ‘navigation.php’; ?>  
<div id=content>  
      <header>Seitenüberschrift</header>  
	<article>  
	<header>Abschnittsüberschrift</header>  
	Text eines Abschnitts  
        </article>  
</div>  
<footer>Text Footer</footer>  
  
</body>  
</html>

Wenn der Inhalt der Seite kürzer ist als der Viewport, soll der Footer trotzdem am unteren Rand des Viewports stehen. Die Seite soll also „mindestens 100% hoch“ sein.

Ich habe das u.a. versucht mit <body style=min-height:100%> und <div id=content style=min-height:100%> und verschiedenen position-Angaben zum Footer, aber nichts bringt das gewünschte Ergebnis.

Help me if you can …

MfG

pixxma

P.S.: Was haltet ihr von einem Verzicht auf die Anführungszeichen bei den Werten?

  1. Om nah hoo pez nyeetz, pixxma!

    Wenn der Inhalt der Seite kürzer ist als der Viewport, soll der Footer trotzdem am unteren Rand des Viewports stehen.

    Du suchst „sticky footer“ Beispiel

    P.S.: Was haltet ihr von einem Verzicht auf die Anführungszeichen bei den Werten?

    Ich persönlich halte nichts davon, vor allem, weil es Fälle gibt, in denen du sie brauchst.

    <div class=foo bar> != <div class="foo bar">  
    
    

    Deshalb setze ich sie immer.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Don und Donald Duck.

    1. Du suchst „sticky footer“ Beispiel

      Danke, sticky footer kannte ich bisher noch nicht. Das verlinkte Beispiel kann ich im Augenblick noch nicht korrekt auf meinen komplexen Quellcode übertragen, aber ich sitze gerade hoffnungsvoll daran ...

      MfG

      pixxma

  2. Om nah hoo pez nyeetz, pixxma!

    <div id=content>

      
    Verwende für den Hauptinhalt das main-Element.  
    ~~~html
    <main role="main">  
    
    

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Ata und Atari.

  3. P.S.: Was haltet ihr von einem Verzicht auf die Anführungszeichen bei den Werten?

    Wenn die Werte aus ascii-Zeichen ohne Leerzeichen bstehen, lasse ich gerne die Anführungszeichen weg. Alles, was überflüssig ist, belastet Speicher und Übertragungszeit. Schaut euch mal den Quellcode von Google-Seiten an, da werden sogar die Zeilenumbrüche eingespart.

    Die Mentalität "wir haben's ja" führt im Leben zu unbedachter Verschwendung und zu Müllhaufen.

    Allerdings traue ich der gesamten EDV nicht über den Weg, wenn es um Zeichen ausserhalb der ASCII-Werte samt Leerzeichen geht. Die setze ich dann in Gänsefüsschen.

    <div class=foo bar> != <div class="foo bar">

    Genau, Leerzeichen gehört zum Wert "Klassen aufzählen"!

    Linuchs

    1. Hallo,

      P.S.: Was haltet ihr von einem Verzicht auf die Anführungszeichen bei den Werten?
      Wenn die Werte aus ascii-Zeichen ohne Leerzeichen bstehen, lasse ich gerne die Anführungszeichen weg.

      und das kann schon falsch sein. Je nach verwendetem HTML-Dialekt sind die Regeln da recht unterschiedlich.

      XHTML 1.0 macht's uns besonders einfach: Anführungszeichen um Attributwerte sind *immer* Pflicht.

      HTML 4.01 erlaubt das Weglassen, wenn der Attributwert ausschließlich aus [0-9A-Za-z] besteht (ein Unterstrich ist auch noch erlaubt, IIRC). Ein Punkt, ein Slash, ein Prozentzeichen - das reicht schon, dass die Anführungszeichen zur Pflicht werden. Die generelle Verwendung von Anführungszeichen wird aber empfohlen.

      Bei HTML 5 weiß ich's nicht genau, aber angesichts der sonstigen "solange's geht"-Mentalität könnte ich mir vorstellen, dass da einiges mehr erlaubt ist.

      Und daher halte ich es wie Matthias: Ich setze Attributwerte immer in Anführungszeichen und empfehle das auch anderen.

      Ciao,
       Martin

      --
      Sozial ist, wenn andere bezahlen.
      Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
      1. Bei HTML 5 weiß ich's nicht genau, aber angesichts der sonstigen "solange's geht"-Mentalität könnte ich mir vorstellen, dass da einiges mehr erlaubt ist.

        Vgl.
        http://forum.de.selfhtml.org/archiv/2014/3/t216697/#m1486523
        http://forum.de.selfhtml.org/archiv/2014/3/t216697/#m1486637

        Mathias

    2. @@Linuchs:

      nuqneH

      Alles, was überflüssig ist, belastet Speicher und Übertragungszeit. Schaut euch mal den Quellcode von Google-Seiten an, da werden sogar die Zeilenumbrüche eingespart.

      Eine Einsparung im Promillebereich mag im Fall von Google, das milliardenfach aufgerufen wird, relevant sein.* Für die allermeisten Webseiten sind die paar Byte mehr völlig irrelevant.

      Qapla'

      * Weshalb auch bei Jens Meiert immer riet riet], alles „Überflüssige“ einzusparen, als er noch bei Google war. Ich hab ihm wiedersprochen, immer wieder.

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. @@Gunnar Bittersmann:

        nuqneH

        * Weshalb auch bei Jens Meiert immer riet riet], alles „Überflüssige“ einzusparen, als er noch bei Google war.

        „riet]“ ist überflüssig und hätte eingespart werden sollen.

        Ich hab ihm wiedersprochen, immer wieder.

        Ebenso ein e: wiedersprochen, immer wider. ;-)

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Hallo,

          Ebenso ein e: wiedersprochen, immer wider. ;-)

          du meintest "iemmer"

          scnr
          Kalk

    3. Meine Herren!

      Schaut euch mal den Quellcode von Google-Seiten an, da werden sogar die Zeilenumbrüche eingespart.

      Aber Anführungszeichen um Attribut-Werte werden erhalten ;)

      Und bei aller Liebe Bandbreiten-Optimierung funktioniert auch nicht, indem wir uns ein paar Anführungszeichen zu Lasten der Leserlichkeit sparen, da gibt es bessere Methoden:

      • Caching
      • gzip-Komprimierung
      • Minifizierung
      • Konkatenation
      • CDNs
      • HTTP-Erweiterungen wie Googles SPDY
      • … (obligatorische Auslassungspunkte, die den Eindruck erwecken sollen, ich wüsste noch mehr, aber insgeheim fällt mir auf die Schnelle einfach nichts mehr ein)
      --
      “All right, then, I'll go to hell.” – Huck Finn
      1. Hallo,

        Und bei aller Liebe Bandbreiten-Optimierung funktioniert auch nicht, indem wir uns ein paar Anführungszeichen zu Lasten der Leserlichkeit sparen, da gibt es bessere Methoden:

        Natürlich ist das eine mögliche Technik. Die anderen Techniken sind nur einfacher anzuwenden und bringen schneller Resultate.

        • Minifizierung

        Minifzierung auf HTML angewandt wäre das automatisierte Entfernen von unnötigen Begrenzern.

        Mathias

  4. @@pixxma:

    nuqneH

    P.S.: Was haltet ihr von einem Verzicht auf die Anführungszeichen bei den Werten?

    Abstand.

    Ich möchte mein Wissen nicht mit Ballast vollmüllen, wann man Anführungszeichen um Attributwerte setzen muss bzw. wann man sie weglassen kann.

    Oder gar bei Änderungen von Attributwerten nachträglich Anführungszeichen hinzufügen müssen, was prinzipiell fehleranfällig ist.

    Ich bevorzuge XML-Syntax: Immer Attributwerte immer in Anführungszeichen. Auch optionale Tags nicht weglassen. Die Validierung als XHTML kann einem schon weiterhelfen, wenn das DOM anders aussieht als gedacht.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  5. @@pixxma:

    nuqneH

    Wenn der Inhalt der Seite kürzer ist als der Viewport, soll der Footer trotzdem am unteren Rand des Viewports stehen. Die Seite soll also „mindestens 100% hoch“ sein.

    position: sticky

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

      position: sticky

      Demnächst auch in Ihrem Browser.

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Bart und Bartresen.