Flex Child übernimmt nicht die Höhe von seinem Parent

[j4nk3y]

Guten Morgen zusammen,

ich hätte da noch eine Kleinigkeit zu display: flex;.
Hier ein kleines Fiddle zum schauen.

Ich schaffe es nicht einem child eines Flexbox child's die property overflow: auto; zu geben. Es scheint so, dass das child nicht die höhe von seinem Parent's Parent [Grandpa^^] übernimmt. In dem Fiddle Wäre das der Rot umrandete Article.

Hat da Jemand eine Idee?

Gruß Jo

[Tabellenkalk]

Hallo,

Ich schaffe es nicht einem child eines Flexbox child's die property overflow: auto; zu geben.

doch, das hast du geschafft.

Es scheint so, dass das child nicht die höhe von seinem Parent's Parent [Grandpa^^] übernimmt.

doch tut es.

Hat da Jemand eine Idee?

Du hast weder dem Child noch dem Grandpa eine max-height gegeben, also wird es so groß, wie der Inhalt erfordert.

Gruß
Kalk

[j4nk3y]

Moin,

Ich schaffe es nicht einem child eines Flexbox child's die property overflow: auto; zu geben.

doch, das hast du geschafft.

Diese wird aber nicht übernommen/ausgeführt.

Es scheint so, dass das child nicht die höhe von seinem Parent's Parent [Grandpa^^] übernimmt.

doch tut es.

Nein sonst würde der Content ja nicht über das Elternelement hinaus ragen.

Hat da Jemand eine Idee?

Du hast weder dem Child noch dem Grandpa eine max-height gegeben, also wird es so groß, wie der Inhalt erfordert.

Nein die max-height Eigenschaft sollte aus dem Body mit height: 100%; kommen. Ich möchte ja gerade verhindern das die Seite zu statisch wird indem ich jedem Element eine eigene Höhe oder Breite zuweise. Das ist denk ich auch nicht der Sinn von Flexboxen.

Gruß Jo

[j4nk3y]

Moin,

Du hast weder dem Child noch dem Grandpa eine max-height gegeben, also wird es so groß, wie der Inhalt erfordert.

Ich kann auch dem Parent oder dem Parent's Parent nicht etwas sagen wie:
max-height: 100%; position: relative;, das funktioniert auch nicht.
Und logischerweise wenn ich irgendwo eine quasi feste Höhe à la height: 20em; setze, beffindet sich der footer nicht mehr am Seiten Ende sondern entweder weiter oben oder unten, welches zum scrollen der gesamten Seite führt, was ich auch verhindern wollte.

Ich finde einfach keine Lösung/Variante damit das overflow: auto; sein Werk vollbringt.

Gruß
Jo

[MrMurphy1]

Hallo,

du musst dem article eine Höhe geben.

Insgesamt sind deine Vorstellungen über den Aufbau einer Webseite eher praxisfremd und besucherunfreundlich.

Ich habe den Verdacht dass du vor einem großen Desktop-Monitor sitzt und dir noch keine Gedanken gemacht hast, wie die Seite auf Smartphones oder Tablets angezeigt werden soll.

beffindet sich der footer nicht mehr am Seiten Ende

Du solltest dich mit "Sticky Footer" beschäftigen.

Gruss

MrMurphy

[j4nk3y]

Hey,

du musst dem article eine Höhe geben.

Ja, nur height: 100%; bzw max-height: 100%; (100% vom Elternelement) möchte einfach nicht umgesetzt werden.

Ich habe den Verdacht dass du vor einem großen Desktop-Monitor sitzt und dir noch keine Gedanken gemacht hast, wie die Seite auf Smartphones oder Tablets angezeigt werden soll.

Ja das stimmt, aber Chrome und Firefox bieten tolle Möglichkeiten auch kleinere Bildschirme zu simulieren. Da das Layout von vornherein anderes aussehen soll spielt die Position des Footers keine Rolle da der Content da untereinander angezeigt werden soll.

beffindet sich der footer nicht mehr am Seiten Ende

Du solltest dich mit "Sticky Footer" beschäftigen.

Das habe ich ganz am Anfang gemacht und mit position mein Layout gestaltet. als ich dann Fragen dazugestellt habe hieß es position wäre nicht mehr stand der Zeit und ich solle gefälligst
display: block/inline/inline-block; benutzen. Später hieß es dann, dass ich doch besser zu Flexboxen wechseln solle. Dies habe ich aber schon mehrmals angemerkt. Da aber auch Flexbox seine Grenzen hat musste ich schon im body sagen das dieser Absolut positioniert sein soll damit eben der footer am ende der Seite ist. In diesem Sinne ist das ein "Sticky Footer" egal wieviel Content im main steht.

Gruß
Jo

[Matthias Apsel]

Hallo j4nk3y,

Ja, nur height: 100%; bzw max-height: 100%; (100% vom Elternelement) möchte einfach nicht umgesetzt werden.

100% von auto ist auto. Überlege dir, woher die (=alle!) Höhenangaben kommen.

Bis demnächst
Matthias

[j4nk3y]

Hi Matthias,

100% von auto ist auto. Überlege dir, woher die (=alle!) Höhenangaben kommen.

Eigentlich nur vom Body, alles andere hängt vom Inhalt ab. Also header,nav,main und footer. Problem ist, warum kann der Inhalt Größer werden als vom Parent vorgegeben. Und wie unterdrücke ich das?

Gruß
Jo

[Matthias Apsel]

Hallo j4nk3y,

100% von auto ist auto. Überlege dir, woher die (=alle!) Höhenangaben kommen.

Eigentlich nur vom Body

Und wo hat der die her?

Bis demnächst
Matthias

[j4nk3y]

Hi Matthias,

100% von auto ist auto. Überlege dir, woher die (=alle!) Höhenangaben kommen.

Eigentlich nur vom Body

Und wo hat der die her?

Ähm, von der Browserfenstergröße, danach richtet sich ja die Prozentangabe.

Gruß
Jo

[Matthias Apsel]

Hallo j4nk3y,

Eigentlich nur vom Body

Und wo hat der die her?

Ähm, von der Browserfenstergröße, danach richtet sich ja die Prozentangabe.

Nein.

Btw: Ich weiß nicht, ob es notwendig ist, bei jsfiddle valide Dokumente zu erzeugen, hilfreich ist es allemal.

Bis demnächst
Matthias

[j4nk3y]

Hey,

Ähm, von der Browserfenstergröße, danach richtet sich ja die Prozentangabe.

Nein.

Woran richtet sich dann die Prozentangabe?

Btw: Ich weiß nicht, ob es notwendig ist, bei jsfiddle valide Dokumente zu erzeugen, hilfreich ist es allemal.

Wie meinst du das?

Gruß
Jo

[j4nk3y]

Kleiner Nachtrag,

Hab gerade bemerkt das das Fiddle in Firefox nicht das Problem darstellt. In Opera und Chrome sieht man es aber gut. Der Inhalt des Child's schiebt sich über den footer und über die Grenzen des main.

Gruß
Jo

[Matthias Apsel]

Hallo j4nk3y,

Wie meinst du das?

Ich kann mich nur wiederholen.

Bis demnächst
Matthias

[j4nk3y]

Morgen Matthias,

Wie meinst du das?

Ich kann mich nur wiederholen.

Das heißt nur ausgebildete Mediengestalter können verstehen und ihre Probleme aufgrund ihrer fundierten Kenntnisse selber Lösen?

Ich nehme mir schon meine Zeit zum lernen und setze alles so um wie es mir durch diverse Tutorials und das selfwiki beigebracht wird.

Wenn man aber auch keine Inhaltlich verwertbare Antwort erhält, dann kann man auch nichts dazu lernen.

Und ich habe lediglich gefragt was du damit :

Btw: Ich weiß nicht, ob es notwendig ist, bei jsfiddle valide Dokumente zu erzeugen, hilfreich ist es allemal.

meinst.

Gruß
Jo

[Matthias Apsel]

Hallo j4nk3y,

Und ich habe lediglich gefragt was du damit :

Btw: Ich weiß nicht, ob es notwendig ist, bei jsfiddle valide Dokumente zu erzeugen, hilfreich ist es allemal.

Welches Wort hast du denn an diesem Satz nicht verstanden? Ich vermute „valide“. Was haben deine Recherchen zu „valides HTML-Dokument“ ergeben? Dann hättest du bestimmt auch erkannt, dass body noch ein Elternelement besitzt. Und ebenso, dass dein fiddle, was mit

<body>

beginnt, eben kein gültiges HTML ist.

Browser sind fehlertolerant, ja. Und leider. Aber wenn du sicher sein möchtest, dass deine Dokumente in möglichst vielen Browsern „richtig“ aussehen und in allen Browsern bedienbar sind, ist Validität notwendig. Siehe zum Beispiel Grundgerüst oder auch Dokumentstruktur und -aufbau (übrigens meine ersten beiden Suchtreffer, das kann bei dir anders sein) Aber auch bei DuckDuckGo sind die beiden Seiten vorn dabei.

Bis demnächst
Matthias

[j4nk3y]

Hallo Matthias,

Welches Wort hast du denn an diesem Satz nicht verstanden? Ich vermute „valide“. Was haben deine Recherchen zu „valides HTML-Dokument“ ergeben? Dann hättest du bestimmt auch erkannt, dass body noch ein Elternelement besitzt. Und ebenso, dass dein fiddle, was mit

<body>

beginnt, eben kein gültiges HTML ist.

Nun, falls du dich mit jsFiddle nicht auskennst, erkläre ich dir das gerne. Das Fiddle setzt die Eingabe automatisch erst in einen <body> und dann in ein <html> Element. Das wäre dir vielleicht aufgefallen wenn du genau den code gelesen hättest da mein HTML eben nicht einmal mit einem <body> beginnt. Würde Fiddle das nämlich nicht tun, dann würde die CSS angabe für den <body> welches diesen als Flex-Container deklariert keine Wirkung haben und das Layout würde den beschriebenen Fehler nicht darstellen, da dass <main> kein Flexbox Child mehr ist und die default Property display: block; ausgeführt wird.

Browser sind fehlertolerant, ja. [..] ist Validität notwendig. Siehe zum Beispiel Grundgerüst oder auch Dokumentstruktur und -aufbau [..].

Das ist vollkommen richtig, Danke für den Hinweis.

Gruß
Jo

[Christian Kruse]

Hallo j4nk3y,

Ähm, von der Browserfenstergröße, danach richtet sich ja die Prozentangabe.

Nein.

Woran richtet sich dann die Prozentangabe?

Du hast ein Element vergessen. Welches Element ist Eltern-Element von body? Hat das eine Höhe? :-)

LG,
CK

[j4nk3y]

Hallo Christian,

Du hast ein Element vergessen. Welches Element ist Eltern-Element von body? Hat das eine Höhe? :-)

Das <html></html> hat eine Höhe von 0px.

Gruß
Jo

[MrMurphy1]

Hallo

Später hieß es dann, dass ich doch besser zu Flexboxen wechseln solle.

Guter Rat.

Da aber auch Flexbox seine Grenzen hat ...

Richtig. Aber für dein Vorhaben ist Flexbox trotzdem am Besten geeignet.

Für deinen Wunsch gibt es keine direkte Lösung mit HTML und CSS. Es muss also in jedem Fall etwas gebastelt werden. Ob es eine Lösung mit JavaScript weiß ich nicht, aber JavaScript ist bei vielen Usern blockiert. Es benötigt deshalb ein Fallback.

Insgesamt ist es auch schlechter Stil und besucherunfreundlich andere Scrollleisten als die vom Browser selbst vorzuschreiben. Zur Zeit von Frames im letzten Jahrtausend hatten Webseiten häufig mehrere Scrollleisten. Es hat sich dann herausgestellt, dass die User diese überhaupt nicht wollten und sogar ablehnten. Deshalb wurden und werden aktuell wohl auch keine neuen Möglichkeiten zur Verwendung von Scrollleisten entwickelt.

Durch die Verwendung von Media Queries aufbauend auf einer stabilen Sticky Footer-Verwendung mit Flexbox kann eine Lösung erreicht werden.

Ich habe mal folgendes Beispiel zum direkten Ausprobieren erstellt:

Beispieldatei

Der gesamte Quelltext einschließlich der CSS-Angaben befindet sich im Quelltext.

In den aside-Elementen befinden sich weitere Infos. Den main-Bereich habe ich mit einem Blindtext gefüllt.

Gruss

MrMurphy

[j4nk3y]

Guten Morgen,

Später hieß es dann, dass ich doch besser zu Flexboxen wechseln solle.

Guter Rat.

Ja war es, hat vieles vereinfaacht bringt aber auch probleme mitsich.

Für deinen Wunsch gibt es keine direkte Lösung mit HTML und CSS. Es muss also in jedem Fall etwas gebastelt werden.

Rumbasteln in diesem Fall dann feste höhen setzen will ich ja vermeiden. Mir gefällt schon das position: absolute; für den Body nicht, aaber anders funktioniert es nicht.

Insgesamt ist es auch schlechter Stil und besucherunfreundlich andere Scrollleisten als die vom Browser selbst vorzuschreiben. Zur Zeit von Frames im letzten Jahrtausend hatten Webseiten häufig mehrere Scrollleisten. Es hat sich dann herausgestellt, dass die User diese überhaupt nicht wollten und sogar ablehnten. Deshalb wurden und werden aktuell wohl auch keine neuen Möglichkeiten zur Verwendung von Scrollleisten entwickelt.

Ok, interessanter Punkt, Danke.

Ich habe mal folgendes Beispiel zum direkten Ausprobieren erstellt:

Beispieldatei

Der gesamte Quelltext einschließlich der CSS-Angaben befindet sich im Quelltext.

Ja, ähnlich sieht das bei mir auch aus. Danke.

Gruß
Jo

[MrMurphy1]

Hallo

Rumbasteln in diesem Fall dann feste höhen setzen will ich ja vermeiden. Mir gefällt schon das position: absolute; für den Body nicht, aaber anders funktioniert es nicht.

Doch, siehe mein Beispiel. Das kommt komplett ohne position aus und erfüllt deine Wünsche.

Gruss

MrMurphy

[j4nk3y]

Hey, Murphy,

Rumbasteln in diesem Fall dann feste höhen setzen will ich ja vermeiden. Mir gefällt schon das position: absolute; für den Body nicht, aaber anders funktioniert es nicht.

Doch, siehe mein Beispiel. Das kommt komplett ohne position aus und erfüllt deine Wünsche.

1. Das war auf mein Beispiel bezogen, dass ohne position: absolute;, dieses Layout nicht sauber Möglich ist. Außer man setzt eine feste Höhe Für alle Elemente.

2. Das stimmt aber du setzt ja auch eine Höhe mit height: calc(100vh - 13.1rem);, welches bei mir, aus irgendeinem Grund den ich nicht finde/kenne, nicht funktioniert.

Gruß
Jo

[MrMurphy1]

Hallo

Deine Fehlerbeschreibung ist leider nicht eindeutig.

Funktioniert mein verknüpftes Beispiel bei dir nicht? Oder funktioniert die Übernahme in deinen Quelltext nicht?

Und in welchen Browsern hast das getestet?

Mein Beispiel funktioniert in allen mir zu Verfügung stehen aktuellen Browsern: Firefox, IE11, Chrome und Opera. Den Safari gibt es für Windows leider nicht.

Das stimmt aber du setzt ja auch eine Höhe mit ` height: calc(100vh - 13.1rem)

Ganz ohne Höhenangaben geht es nicht. Aber meine Höhe ist flexibel und passt sich der Fensterhöhe an.

Gruss

MrMurphy

[j4nk3y]

Hey

Mein Beispiel funktioniert in allen mir zu Verfügung stehen aktuellen Browsern: Firefox, IE11, Chrome und Opera. Den Safari gibt es für Windows leider nicht.

Bei mir auch, habe nicht gesagt das dein Beispiel nicht funktioniert.

Ganz ohne Höhenangaben geht es nicht. Aber meine Höhe ist flexibel und passt sich der Fensterhöhe an.

Bisher hatte ich nur eine Höhenangabe für den Body mit 100%. Also ja eine habe ich alles andere macht display: flex;.

Ja, sollte meine auch, tut es aber nicht. Und ich fange jetzt nicht an die Summe aller margin,padding und Schriftgrößen entlang der Verticalen durch das entsprechende Element zu berechnen. Da würde ich in einer Woche noch in meinen Taschenrechner Zahlen eintippen und es würde sich eine vorherige Umschulung zum Buchhalter lohnen.

Gruß
Jo

[Gunnar Bittersmann]

@@MrMurphy1

Den Safari gibt es für Windows leider nicht.

Ich würde das anders sagen: Den Safari gibt es leider für OS X und iOS.

LLAP 🖖