Footer-Bereich soll mindestens am unteren Viewport-Ende stehen
pixxma
- css
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?
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
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
Om nah hoo pez nyeetz, pixxma!
<div id=content>
Verwende für den Hauptinhalt das main-Element.
~~~html
<main role="main">
Matthias
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
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
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
@@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.
@@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'
Hallo,
Ebenso ein e: wiedersprochen, immer wider. ;-)
du meintest "iemmer"
scnr
Kalk
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:
Grundlage für Zitat #1970.
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
@@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'
@@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.
Qapla'