Footer immer ganz unten?

[Meowsalot]

Hallo alle,

ich möchte gerne meinen Footer immer ganz unten haben. Ist dieses möglich ohne zu wissen wie viel Inhalt auf meiner Seite vorhanden ist?

http://example-website.bplaced.net/footer.html

Bis bald! Meowsalot (Bernd)

[Gunnar Bittersmann]

@@Meowsalot

ich möchte gerne meinen Footer immer ganz unten haben. Ist dieses möglich ohne zu wissen wie viel Inhalt auf meiner Seite vorhanden ist?

Ja, z.B. mit Flexbox.

LLAP 🖖

[Meowsalot]

Hallo Gunnar,

Ja, z.B. mit Flexbox.

Dankeschön!

Bis bald!
Meowsalot (Bernd)

[Henry]

Hallo Meowsalot,

Ja, z.B. mit Flexbox.

Dankeschön!

hmmm, wundert mich. Bei mir funktioniert das Beispiel von Gunnar nicht so(FF + IE), wie ich die Frage verstehen würde…

und nur aus Neugierde, warum nutzt du eigentlich Bootstrap zusätzlich in deiner Seite?

Nachtrag: Ach ja position:fixed;bottom:0; würde evtl. auch gehen, je nachdem was du genau vorhast.

Gruss
Henry

[beatovich]

hallo

Nachtrag: Ach ja position:fixed;bottom:0; würde evtl. auch gehen, je nachdem was du genau vorhast.

Aber bitte nicht auf mobiles.

[Gunnar Bittersmann]

@@Henry

Nachtrag: Ach ja position:fixed;bottom:0; würde evtl. auch gehen, je nachdem was du genau vorhast.

Das „evtl.“ lässt sich genauer angeben: in so ziemlich gar keinem Fall.

Ein fixed positionierter Footer würde das Ende des Hauptinhalts zudecken. Da man nicht weiß, wie hoch der Footer ist, kann man nicht wissen, wie viel Platz man freihalten müsste.

LLAP 🖖

[Henry]

Hallo Gunnar,

Das „evtl.“ lässt sich genauer angeben: in so ziemlich gar keinem Fall.

Oh doch, bin gerade mit so einem Design beschäftigt. Daher auch zuletzt die Fragen wegen scroll, usw.

Ein fixed positionierter Footer würde das Ende des Hauptinhalts zudecken. Da man nicht weiß, wie hoch der Footer ist, kann man nicht wissen, wie viel Platz man freihalten müsste.

Vielleicht ist das Zudecken ja gewünscht? Bei mir ist das aktuell so, allerdings in verschiedenen Variationen. Als Basis dient ein flexibles Design mit festem Footer und Header, die sich je nach Bildschirm anpassen und zusätzlich noch mal beim Content und beim Scrollen entfernen/kleiner werden/transparenter werden, oder von allem etwas. Sieht sehr schön aus und ist sehr funktionell. Würde ungern das zurecht pflücken um es hier zu posten, aber wenn gewünscht, mache ich das.

@beatovich
doch auch mobil

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

Ein fixed positionierter Footer würde das Ende des Hauptinhalts zudecken. Da man nicht weiß, wie hoch der Footer ist, kann man nicht wissen, wie viel Platz man freihalten müsste.

Vielleicht ist das Zudecken ja gewünscht?

Das glaube ich kaum. Wenn man Inhalte hat, die nie zu sehen sein sollen, weil sie hinter anderen Elementen versteckt sind, warum tut man sie dann überhaupt auf dein Seite?

Ich denke, der Hauptinhalt soll bis zum Ende vollständig lesbar sein. Das wäre bei einem fixed positionierten Footer nicht gewährleistet. Also nicht machen!

Wenn Header und Footer ständig im Viewport bleiben sollen … – warum eigentlich? Wenn der Nutzer sich dem Hauptinhalt widmet, will sie wohl nicht durch andere Elemente davon abgelenkt werden? Der Wunsch nach feststehenden Headern/Footern ist wohl nur seitens des Seitenbetreibers, der denkt, dem Nutzer könnte sonst irgendwas verlorengehen. Darüber sollte man mal reiflich nachdenken, bevor man sowas implementiert.

Wenn Header und Footer ständig im Viewport bleiben sollen, dann ist nicht position: fixed das Mittel der Wahl, sondern position: sticky. Damit bleibt der Hauptinhalt vollständig sichtbar. Ich hab das in diesem Beispiel mal hinzugefügt – im media query; bei geringer Viewporthöhe sollen Header und Footer nicht sticky sein, sonst wäre der Hauptinhalt nur durch einen schmalen Sehschlitz sichtbar.

Und ja, ich weiß, dass Header und Footer im IE dann eben nicht ständig oben bzw. untem im Viewport zu sehen sind. Und das ist auch ziemlich egal! Es wird sich kein Nutzer darüber beschweren.

LLAP 🖖

[beatovich]

hallo

Wenn Header und Footer ständig im Viewport bleiben sollen, dann ist nicht position: fixed das Mittel der Wahl, sondern position: sticky. Damit bleibt der Hauptinhalt vollständig sichtbar. Ich hab das in diesem Beispiel mal hinzugefügt – im media query; bei geringer Viewporthöhe sollen Header und Footer nicht sticky sein, sonst wäre der Hauptinhalt nur durch einen schmalen Sehschlitz sichtbar.

Das sieht ja nicht schlecht aus: https://caniuse.com/#search=sticky

[Henry]

Hallo Gunnar,

Vielleicht ist das Zudecken ja gewünscht?

Das glaube ich kaum. Wenn man Inhalte hat, die nie zu sehen sein sollen, weil sie hinter anderen Elementen versteckt sind, warum tut man sie dann überhaupt auf dein Seite?

Weil sie beim Scrollen eben doch zu sehen sind. Ist ne Frage des Designs, aber mir ist natürlich klar, dass Designansichten hier im Forum nicht unbedingt mit normalen Usern übereinstimmen.

Ich denke, der Hauptinhalt soll bis zum Ende vollständig lesbar sein. Das wäre bei einem fixed positionierten Footer nicht gewährleistet. Also nicht machen!

Das stimmt nicht ganz, hatte ja schon auf viewport- und scrollbezogene Änderungen hingewiesen, zumindest in meinem Fall.

Der Wunsch nach feststehenden Headern/Footern ist wohl nur seitens des Seitenbetreibers, der denkt, dem Nutzer könnte sonst irgendwas verlorengehen.

Nein, eine Frage des Designs. Das Auge isst mit.

Wenn Header und Footer ständig im Viewport bleiben sollen, dann ist nicht position: fixed das Mittel der Wahl, sondern position: sticky. Damit bleibt der Hauptinhalt vollständig sichtbar.

Ja, aber nur wenn das Verhalten exakt so gewünscht ist.

Ich hab das in diesem Beispiel mal hinzugefügt – im media query; bei geringer Viewporthöhe sollen Header und Footer nicht sticky sein, sonst wäre der Hauptinhalt nur durch einen schmalen Sehschlitz sichtbar.

Wollte eigentlich ein paar Änderungen/Variationen davon machen aber, bei Codepen? viel zu hakelig und wieder mühsam zusammenpflücken, nee. Wollte eigentlich auch nur zeigen/wissen, wozu dann überhaupt sticky? scrollst hoch => Header weg, scrollst runter => Footer weg, ist auch bei statischem Layout so. Klar, kenne ich die Interaktion dabei, aber nur sichtbar oder weg, reicht mir nicht und wenn ich dann schon mehr über JS/CSS mache, dann nehme ich auch lieber gleich das leichte kontrollierbare fixed.

Gruss
Henry

[marctrix]

Hej Henry,

Vielleicht ist das Zudecken ja gewünscht?

Das glaube ich kaum. Wenn man Inhalte hat, die nie zu sehen sein sollen, weil sie hinter anderen Elementen versteckt sind, warum tut man sie dann überhaupt auf dein Seite?

Weil sie beim Scrollen eben doch zu sehen sind. Ist ne Frage des Designs, aber mir ist natürlich klar, dass Designansichten hier im Forum nicht unbedingt mit normalen Usern übereinstimmen.

Doch! Sie stimmen nur oft nciht mit denn Annahmen von Designern und Seitenbetreibern überein!

Manchmal auch nicht mit den Ansichten von „Freunden“ und „Mutti“ und „allen die man kennt, die das alle toll finden“…

Der eine oder andere hier ist ähnlich unbeliebt wie Dieter Bohlen bei DSDS, weil er ausspricht, wenn ein Gesang schlichtweg Scheiße ist.

Der Wunsch nach feststehenden Headern/Footern ist wohl nur seitens des Seitenbetreibers, der denkt, dem Nutzer könnte sonst irgendwas verlorengehen.

Nein, eine Frage des Designs. Das Auge isst mit.

Nein. Schönheit ist nicht absolut. Sie liegt vielmehr im Auge des Betrachters, ist Moden unterworfen und hängt neben vielem anderen von persönlichen Empfindungen, kulturellem Background und sogar der persönlichen Tagesstimmung ab. Was hunderten gefällt, kann zehn andere anwidern!

In einem halben Jahr können sich hunderte am Effekt satt gesehen haben und ihn ebenfalls unerträglich finden. Oder die zehn anderen finden das plötzlich toll.

Unzugänglichkeit dagegen ist definiert, messbar, experimentell nachweisbar und objektiv nachvollziehbar.

Marc

[Gunnar Bittersmann]

@@marctrix

Der eine oder andere hier ist ähnlich unbeliebt wie Dieter Bohlen bei DSDS, weil er ausspricht, wenn ein Gesang schlichtweg Scheiße ist.

ICH WILL HIER NICHT MIT DIETER BOHLEN VERGLICHEN WERDEN!!1elf

Wenn, dann mit Simon Cowell. Den mag ich.

LLAP 🖖

[marctrix]

Hej @Dieter Bohlen,

wie meinen? 😂

Marc

PS: Man zieht sich nur Schuhe an, die passen — es sei denn, man ist eine böse Stiefschwester von Aschenputtel… >:->

[Gunnar Bittersmann]

@@Henry

Vielleicht ist das Zudecken ja gewünscht?

Das glaube ich kaum. Wenn man Inhalte hat, die nie zu sehen sein sollen, weil sie hinter anderen Elementen versteckt sind, warum tut man sie dann überhaupt auf dein Seite?

Weil sie beim Scrollen eben doch zu sehen sind.

Nein, eben nicht.

Du kannst bei dir nachmessen und feststellen, dass der Header 183 Pixel hoch ist und der Footer 237 Pixel hoch. Dann machst du
main { padding-top: 183px; padding-bottom: 237px }?

Bei anderen brauchen Header und Footer aber womöglich mehr Höhe: andere Schriftart, Schriftgröße, was bei dir in drei Zeilen passt benötigt bei anderen vier und und und …

Und schon sind eben nicht alle Inhalte durch Scrollen zu erreichen, sondern Teile auf Nimmerwiedersehen verdeckt. Es gibt keine magic number, die sicherstellt, das alles erreichbar wäre.

und wenn ich dann schon mehr über JS/CSS mache, dann nehme ich auch lieber gleich das leichte kontrollierbare fixed.

Du willst per JavaScript die Höhe von Header und Footer nach dem Rendern (und nach jedem Neurendern bei resize) auslesen und das Padding entspreched setzen? Das ist nicht das, was ich „leicht kontrollierbar“ nennen würde.

position: sticky nenne ich leicht kontrollierbar. Und wenn das in alten Browsern keine Wirkung zeigt, geht die Welt nicht unter.

LLAP 🖖

[marctrix]

Hej Henry,

Vielleicht ist das Zudecken ja gewünscht? Bei mir ist das aktuell so, allerdings in verschiedenen Variationen. Als Basis dient ein flexibles Design mit festem Footer und Header, die sich je nach Bildschirm anpassen und zusätzlich noch mal beim Content und beim Scrollen entfernen/kleiner werden/transparenter werden, oder von allem etwas. Sieht sehr schön aus und ist sehr funktionell. Würde ungern das zurecht pflücken um es hier zu posten, aber wenn gewünscht, mache ich das.

Klingt heikel, aber interessant. Ich würde das gerne mal sehen!

Marc

[Meowsalot]

Hallo Henry,

hmmm, wundert mich. Bei mir funktioniert das Beispiel von Gunnar nicht so(FF + IE), wie ich die Frage verstehen würde…

wie verstehst du denn die Frage? Bei mir geht es sowohl im FF als auch im IE

und nur aus Neugierde, warum nutzt du eigentlich Bootstrap zusätzlich in deiner Seite?

weil ich darüber die Font Awesome einbinde.

Bis bald!
Meowsalot (Bernd)

[beatovich]

hallo

weil ich darüber die Font Awesome einbinde.

Dafür brauchst du doch nicht bootstrap.

[Meowsalot]

Hallo beatovich,

stimmt, ich überlege derzeit ob ich meine ganze Seite auf Bootstrap umstelle. Ich fummel schon viel zu lange am Design rum. Die Seite sollte schön längst online sein. Bootstrap hätte alles fertig was ich benötige.

Bis bald!
Meowsalot (Bernd)

[marctrix]

Hej beatovich,

weil ich darüber die Font Awesome einbinde.

Dafür brauchst du doch nicht bootstrap.

Doch! Sonst muss man das doch selber machen!

Ich gehe mal meine Kanonen laden. Die Spatzen sind zwar weg, aber ich habe da eine Mücke im Schlafzimmer gehört…

Marc

[Matthias Apsel]

Hallo marctrix,

weil ich darüber die Font Awesome einbinde.

Dafür brauchst du doch nicht bootstrap.

Doch! Sonst muss man das doch selber machen!

Humor- oder Ironie-Tag vergessen?

Bis demnächst
Matthias

[Fred]

Moin

Humor- oder Ironie-Tag vergessen?

Steht doch darunter:

Ich gehe mal meine Kanonen laden. Die Spatzen sind zwar weg, aber ich habe da eine Mücke im Schlafzimmer gehört…

Fred

[marctrix]

Hej Matthias,

Hallo marctrix,

weil ich darüber die Font Awesome einbinde.

Dafür brauchst du doch nicht bootstrap.

Doch! Sonst muss man das doch selber machen!

Humor- oder Ironie-Tag vergessen?

Das käme mir vor wie mit Katzen auf Kanonen… — ach egal. Ich habe es nachgereicht… 😂

Marc

[Henry]

Hallo Meowsalot,

hmmm, wundert mich. Bei mir funktioniert das Beispiel von Gunnar nicht so(FF + IE), wie ich die Frage verstehen würde…

wie verstehst du denn die Frage? Bei mir geht es sowohl im FF als auch im IE

Ich hätte vermutet, du meinst einen Footer der, zumindest am Anfang, unbedingt sichtbar sein soll. Weil, ansonsten ist der Footer als Blockelement, ja sowieso immer unten wenn im HTML richtig angeordnet. Bei Bedarf u.U. noch Feinjustierung des Body (Höhe) mit vh. Na dann OK, im FF funktioniert Gunnars Beispiel, IE müsste angepasst werden, wenn benötigt.

Gruss
Henry

[Henry]

Nachtrag:

habe eben was übersehen:

wie verstehst du denn die Frage? Bei mir geht es sowohl im FF als auch im IE

Was hast du denn für eine IE-Version? Bei mir sieht das so aus:

Gruss
Henry

[Meowsalot]

Hallo Henry,

ich habe den Microsoft Edge

Bis bald!
Meowsalot (Bernd)

[Henry]

Hallo Meowsalot,

ich habe den Microsoft Edge

rofl 😉 Edge != IE

Gruss
Henry

[Meowsalot]

Hallo Henry,

oh nein :/ Da sieht es wirklich scheiße aus. Laut https://caniuse.com/#search=flex steht es um den IE 10/11 auch nicht gut. Also vergesse ich Flex ganz schnell wieder.

Ich glaube ich gehe doch zu Bootstrap über.

Bis bald! Meowsalot (Bernd)

[Henry]

Hallo Meowsalot,

oh nein :/ Da sieht es wirklich scheiße aus. Laut https://caniuse.com/#search=flex steht es um den IE 10/11 auch nicht gut. Also vergesse ich Flex ganz schnell wieder.

Ich glaube ich gehe doch zu Bootstrap über.

+++ Stop +++

Nein eher umgekehrt.

• IE Präsenz geht immer weiter zurück
• Bootstrap war mal eine Alternative bevor es GRID gab, aber nun m.m.n. nicht sinnvoll.
• Flex geht auch im IE, wenn angepasst.

Wenn du einen Entwurf hast, wie deine Seite am Ende aussehen soll, versuchen hier sicher einige zu helfen.

Gruss
Henry

[Meowsalot]

Hallo Henry,

http://example-website.bplaced.net/footer.html
Im IE 11 sollte es jetzt auch funktionieren. Ich habe folgendes hinzugefügt:

html, body {
	  margin: 0;
	  padding: 0;
    height: 100%;
}
body {
     min-height: 100vh;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
     flex-flow: column nowrap;
}
main {
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

Ein älteren Browser habe ich leider nicht unter Windows 10

Bis bald! Meowsalot (Bernd)

[Henry]

Hallo Meowsalot,

Im IE 11 sollte es jetzt auch funktionieren.

sieh selbst, links FF, rechts IE11

Ob du das Ganze aber überhaupt so angehen solltest (vielleicht macht du es dir unnötig kompliziert), kann man erst sagen, wenn dein Beispiel mehr zeigt oder du Entwürfe vom Endresultat hast. Denn ich glaube zb. nicht, dass der übergroße Kopfbereich so bleiben soll, wenn weitere Inhalte gezeigt werden?

Gruss
Henry

[marctrix]

Hej Meowsalot,

Ein älteren Browser habe ich leider nicht unter Windows 10

Brauchst du auch cniht. Nimm lieber einen Neuren. So wie alle (Ausnahmen bestätigen die Regel).

Marc

[Gunnar Bittersmann]

@@Henry

Was hast du denn für eine IE-Version? Bei mir sieht das so aus:

Vermutlich einen, der main nicht kennt.

Dem ist aber mit main { display: block} schnell auf die Sprünge geholfen. Im Pen ergänzt.

LLAP 🖖

[Henry]

Hallo Gunnar,

Dem ist aber mit main { display: block} schnell auf die Sprünge geholfen. Im Pen ergänzt.

Nicht ganz, IE akzeptiert auch kein CSS auf main, es bleibt nur wieder <div id="main">

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

Dem ist aber mit main { display: block} schnell auf die Sprünge geholfen. Im Pen ergänzt.

Nicht ganz, IE akzeptiert auch kein CSS auf main,

Von was für einem Steinzeit-IE sprichst du?

es bleibt nur wieder <div id="main">

Falsch. Es gibt html5shim.

Außerdem müsste es wennschon, dennschon <div role="main"> heißen.

Eine ID "main" kann natürlich zusätzlich sinnvoll sein – für Skip-Links.

LLAP 🖖

[Henry]

Hallo Gunnar,

Von was für einem Steinzeit-IE sprichst du?

rofl 😉 letzte aktuelle Version IE11

Falsch. Es gibt html5shim.

echt jetzt? Wieder ein Script einbinden anstatt einfach <main> umzubennen? (Sofern man denn überhaupt Rücksicht auf IE nehmen möchte)

Eine ID "main" kann natürlich zusätzlich sinnvoll sein – für Skip-Links.

Auch. Ich bevorzuge ID aber auch sonst, wenn das Element nur einmal vorkommen wird.

Gruss
Henry

[Meowsalot]

Hallo Henry,

echt jetzt? Wieder ein Script einbinden anstatt einfach <main> umzubennen? (Sofern man denn überhaupt Rücksicht auf IE nehmen möchte)

auf den IE sollte man schon achten vor allem wenn man sich an Firmen richtet. Ich kenne Firmen da wird noch mit Windows Vista gearbeitet 😨

Bis bald! Meowsalot (Bernd)

[marctrix]

Hej Meowsalot,

echt jetzt? Wieder ein Script einbinden anstatt einfach <main> umzubennen?

Oder mit der anderen Darstellung leben. main ist wichtig. Ein sticky footer überhaupt nicht, eher schädlich, wenn man den nicht gut umsetzt…

auf den IE sollte man schon achten vor allem wenn man sich an Firmen richtet.

Das heißt aber nicht, dass es im Ie so aussehen muss, wie in anderen Browsern!

Marc

[Meowsalot]

Hallo marctrix,

Oder mit der anderen Darstellung leben. main ist wichtig. Ein sticky footer überhaupt nicht, eher schädlich, wenn man den nicht gut umsetzt…

na wenn der Footer mitten im Bildschirm schwebt finde ich dieses doch nervig, du etwa nicht? Dann lieber ganz auf den Footer verzichten?

auf den IE sollte man schon achten vor allem wenn man sich an Firmen richtet. Das heißt aber nicht, dass es im Ie so aussehen muss, wie in anderen Browsern!

da bin ich etwas anderer Meinung. Ich eine Seite sollte in jedem Browser gleich aussehen? Sonst heißt es doch "Schau mal die Seite an, sind nicht in der Lage ein vernünftiges Design umzusetzen?"

Bis bald!
Meowsalot (Bernd)

[Matthias Apsel]

Hallo Meowsalot,

da bin ich etwas anderer Meinung. Ich eine Seite sollte in jedem Browser gleich aussehen? Sonst heißt es doch "Schau mal die Seite an, sind nicht in der Lage ein vernünftiges Design umzusetzen?"

Nein, eine Seite sollte die Möglichkeiten der Browser nutzen. Sie sollte in jedem Browser benutzbar sein.

Bis demnächst
Matthias

[marctrix]

Hej Meowsalot,

Oder mit der anderen Darstellung leben. main ist wichtig. Ein sticky footer überhaupt nicht, eher schädlich, wenn man den nicht gut umsetzt…

na wenn der Footer mitten im Bildschirm schwebt finde ich dieses doch nervig, du etwa nicht?

Überhaupt nicht. Passiert immer wieder und hat mich noch nicht ein einziges Mal genervt. Gut für den Seitenbetreiber: so wird die Bannerblindheit abgemildert.

Dann lieber ganz auf den Footer verzichten?

Wenn da nur nutzloses Zeug drin steht: unbedingt!

Wenn da sinnvolle oder gar nötige Informationen drin stehen, die in ein footer-Element gehören: auf gar keinen Fall!

auf den IE sollte man schon achten vor allem wenn man sich an Firmen richtet. Das heißt aber nicht, dass es im Ie so aussehen muss, wie in anderen Browsern!

da bin ich etwas anderer Meinung. Ich eine Seite sollte in jedem Browser gleich aussehen? Sonst heißt es doch "Schau mal die Seite an, sind nicht in der Lage ein vernünftiges Design umzusetzen?"

Tja, von Hundertwasser mag mancher auch glauben, dass er nicht in der Lage war, vernünftige Häuser zu entwerfen.

Auch wenn man vielleicht missverstanden wird, sollte man nicht aufhören, das zu tun, was man für das richtige hält…

Meiner Meinung und Erfahrung nach lohnt es nicht, Zeit und Geld zu investieren, damit Webseiten überall gleich aussehen. Es wäre auch Betrug an weniger rückständigen Nutzern. Stichwort: progressive enhancement

Marc

[Gunnar Bittersmann]

@@Meowsalot

Oder mit der anderen Darstellung leben. main ist wichtig. Ein sticky footer überhaupt nicht, eher schädlich, wenn man den nicht gut umsetzt…

na wenn der Footer mitten im Bildschirm schwebt finde ich dieses doch nervig, du etwa nicht?

Dagegen gibt’s ein einfaches Mittel: dem html-Element die Hintergrundfarbe des Footers verpassen, weißen Hintergrund und schwarze Textfarbe für main (oder für für body) – und schon schwebt nichts mehr. Hier mal simuliert.

Dann lieber ganz auf den Footer verzichten?

Das Styling bestimmt nicht das Markup. Der Inhalt bestimmt das Markup.

auf den IE sollte man schon achten

Wie auch auf Textbrowser wie Lynx.

Das heißt aber nicht, dass es im Ie so aussehen muss, wie in anderen Browsern!

da bin ich etwas anderer Meinung.

Na da fragen wir doch mal nach: WWW Do websites need to look exactly the same in every browser? dot com

Sonst heißt es doch "Schau mal die Seite an, sind nicht in der Lage ein vernünftiges Design umzusetzen?"

Kein Nutzer vergleicht das Aussehen einer Webseite in verschiedenen Browsern auf demselben Gerät. Die einzigen, die das tun, sind die Seitenersteller. Und die verstehen oftmals nicht, mit dem verschiedenen Aussehen richtig umzugehen.

Wenn der Footer in einem alten IE bei wenig Seiteninhalt nicht unten am Viewport klebt, dann ist das halt so. Na und? Die Seite sieht ja deshalb nicht schlecht aus. Und der Funktionalität tut das schon gar keinen Abbruch.

Nutzer vergleichen womöglich das Aussehen einer Webseite auf verschiedenen Geräten. Da sollte ein corporate design erkennbar sein. Aber die Seite darf auf dem Desktop und auf dem Smartphone gar nicht gleich aussehen, sondern jeweils an das Gerät angepasst.

LLAP 🖖

[Matthias Apsel]

Hallo Henry,

IE akzeptiert auch kein CSS auf main,

Von was für einem Steinzeit-IE sprichst du?

rofl 😉 letzte aktuelle Version IE11

Das wäre mir neu.

Falsch. Es gibt html5shim. echt jetzt? Wieder ein Script einbinden anstatt einfach <main> umzubennen? (Sofern man denn überhaupt Rücksicht auf IE nehmen möchte)

Durch die Umbenennung nutzt du für 95% der Browser nicht die besten Möglichkeiten. Das Script ist gepackt 3 kB groß. - Würd ich als im Grundrauschen untergehend bezeichnen.

Wenn du IE-Nutzer ein bisschen ärgern möchtest:

<meta http-equiv="X-UA-Compatible" content="IE=9">
<!--[if IE]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

Eine ID "main" kann natürlich zusätzlich sinnvoll sein – für Skip-Links.

Auch. Ich bevorzuge ID aber auch sonst, wenn das Element nur einmal vorkommen wird.

Die Rolle wäre wichtiger.

Bis demnächst
Matthias

[Meowsalot]

Hallo Matthias,

rofl 😉 letzte aktuelle Version IE11 Das wäre mir neu.

laut Microsoft ist die IE 11 wirklich die letzte aktuelle Version:
https://support.microsoft.com/de-de/help/4028118/windows-run-the-latest-version-of-internet-explorer-11 bevor es dann zum Microsoft Edge geht.

Bis bald!
Meowsalot (Bernd)

[beatovich]

hallo

laut Microsoft ist die IE 11 wirklich die letzte aktuelle Version:

Das ist doch mal eine gute Nachricht.

[Gunnar Bittersmann]

@@Henry

Von was für einem Steinzeit-IE sprichst du?

rofl 😉 letzte aktuelle Version IE11

Der hat andere Probleme.

Es gibt html5shim. echt jetzt? Wieder ein Script einbinden anstatt einfach <main> umzubennen?

Wenn du kein externes Script einbinden möchtest, genügt hier auch

<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('main');
document.createElement('footer');
</script>
<![endif]-->

im HTML und

header, main, footer { display: block } 

im Stylesheet (was html5shim mit erledigt).

Und schon kannst du das main-Element ebenso wie header und footer bedenkenlos auch in alten Browsern verwenden.

es bleibt nur wieder <div id="main"> Außerdem müsste es wennschon, dennschon <div role="main"> heißen. Auch. Ich bevorzuge ID aber auch sonst, wenn das Element nur einmal vorkommen wird.

<div id="main"> ist aber semantisch wertlos. Damit hat der Hauptinhalt nicht die landmark role "main". Genau solche landmarks helfen aber Nutzern assistiver Technologien (wie Screenreader), um sich auf der Seite zurechtzufinden.

Nutzer alter IEs liegen dir am Herzen (obwohl die auch einen anderen Browser verwenden könnten), Nutzer assistiver Technologien (die auf das Funktionieren der Seite angewiesen sind) nicht? Ich hoffe, ich irre mich hier. Ansonsten: Prioritäten nochmals überdenken.

LLAP 🖖

[Auge]

Hallo

… letzte aktuelle Version IE11

Es gibt html5shim. echt jetzt? Wieder ein Script einbinden anstatt einfach <main> umzubennen?

Wenn du kein externes Script einbinden möchtest, genügt hier auch

<!--[if lt IE 9]>
<script>
document.createElement('main');
</script>
<![endif]-->

im HTML und

main { display: block } 

im Stylesheet (was html5shim mit erledigt).

Und schon kannst du das main-Element ebenso wie header und footer bedenkenlos auch in alten Browsern verwenden.

Das weiß er schon seit mindestens einer Woche (gezeigt am Beispiel main). 😉

Nutzer alter IEs liegen dir am Herzen (obwohl die auch einen anderen Browser verwenden könnten), Nutzer assistiver Technologien (die auf das Funktionieren der Seite angewiesen sind) nicht? Ich hoffe, ich irre mich hier. Ansonsten: Prioritäten nochmals überdenken.

FACK

Tschö, Auge

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Dem ist aber mit main { display: block} schnell auf die Sprünge geholfen. Im Pen ergänzt.

Das war es aber nicht.

(Hab auf meinem MacBook Air keine VM, komme erst jetzt dazu, mir das mal anzusehen.)

Vermutlich hängt es mit den auf Can I use genannten Bugs zusammen:

• In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.
• IE 11 does not vertically align items correctly when min-height is used.

Warum IE 11 den Hintergrund des Footers halbtransparent macht, kann ich mir auch nicht erklären.

Die Lösung ist simpel: ein @supports (display: flex)-Block. IE 11 flext dann halt nicht. Funzt.

LLAP 🖖

[Gunnar Bittersmann]

@@Meowsalot

weil ich darüber die Font Awesome einbinde.

Dass du dafür kein 300 Kilo schweres Framework brauchst, wurde ja schon gesagt.

Aber mal nachgefragt: Wie bindest du bzw. Bootstrap die ein? Doch hoffentlich nicht als Webfont‽

Seriously, Don’t Use Icon Fonts. S.a. diesen Thread.

Man kann Font Awesome auch als SVG einbinden. Sollte man.

LLAP 🖖