section Höhe 100vh kommt footer in die Quere

    Hallo an alle,


    damit ihr euch vorstellen könnt, wovon ich rede, hier der Link: Bitteschön.


    Bei "Über mich" seht ihr, dass ich 3 sections habe, die sich farblich abwechseln. Die sections sind height:100vh; Funktioniert auch alles hier wunderbar.

    Das führt dann dazu, dass der Footer bei "Printdesign" irgendwo schwebt. Ich verstehe allerdings nicht warum, da er das ja bei "Über mich" nicht tut. Lösche ich den ganzen Inhalt und befülle div section mit langem Text, ist das auch noch der Fall. Demzufolge müsste es ja an section liegen, aber die ist ja auf der anderen Seite dieselbe.

    Ersetze ich height durch min-height, ist der footer da, wo er hingehört, allerdings ist dann der Content innerhalb der section bei "Über mich" nicht mehr richtig platziert. Der gelbe Rahmen gehört div content, ist innerhalb des div section. Und dieses Div soll schön mittig positioniert sein und nur ein bisschen kleiner als die Höhe. Siehe Startseite.

    Wenn ich bei "Printdesign" mehrere sections mache, ist der Footer auch unten, wo er hingehört. Aber der Inhalt sprengt in der ersten section den Rahmen. Daher müsste man wohl schon min-height draus machen. Aber wie löse ich dann das Problem mit der Positionierung innerhalb der section bei "Über mich"?


    Jetzt stecke ich in der Zwickmühle.

    Weiß da jmd Rat?


    Danke

    Elly

    Zitat

    Aber der Inhalt sprengt in der ersten section den Rahmen. Daher müsste man wohl schon min-height draus machen.

    Offenbar wünschst Du dir, dass jede Section genau den freien Raum unterhalb des Headers einnimmt und hast deshalb die Höhe fest definiert. Wenn der Inhalt dann den Rahmen sprengt, ist dieser Wunsch nicht mehr zu erfüllen und die Lösung mit min-height löst das Problem. Es sei denn, sofern der Inhalt das zulässt, Du teilst es auf zwei Sections auf.

    Zitat

    Aber wie löse ich dann das Problem mit der Positionierung innerhalb der section bei "Über mich"?

    Da ist mir jetzt nicht klar, was Du damit meinst?

    Vielleicht verstehst du's nicht, weil ich das später noch geändert habe. Ich habe da jetzt unterschiedliche Klassen draus gemacht und wirklich nur die mit der freien Höhe unterhalb des Menüs als section benannt und auf Seiten wie Printdesign, wo es mehr Platz braucht, eine andere Klasse genommen.


    Aber warum war vorher der Footer deswegen irgendwo? Also genauer gesagt eig genau auf der Höhe, an der ursprünglich das vh aus war. Da hat er sich reingehängt. Aber kann man im Nachhinein ws schlecht nachvollziehen.

    Zitat

    Aber warum war vorher der Footer deswegen irgendwo?

    Der Footer wurde nicht irgendwo angezeigt. Die Browser richten sich nach HTML- und CSS-Regeln. Du hattest die Höhe eines Containers vorgegeben, den Inhalt dann aber höher werden lassen.


    Durch den Dokumentenfluß war bestimmt, dass der Footer sich unterhalb des (jetzt nicht mehr vorhandenen) Containers anordnet. Und genau das hat er getan. Und zwar unabhängig davon, ob der Inhalt des höhenbestimmten Containers in den Container passt.


    Nicht alles was möglich ist, ist mit HTML- und CSS auch sinnvoll.


    Da die Breite des Browserfensters vom Besucher und dessen Hardware / Einstellungen abhängt sollten sich Webseiten in ihrer Höhe der aktuellen Fensterbreite anpassen. Die Höhenbestimmungen sollten also dem Browser überlassen werden. Du willst jedoch immer wieder mal bestimmte Höhen erzwingen. Damit schaffst du dir selbst Probleme - auch zum Nachteil deiner Besucher.


    Sei es, dass die Besucher unnötig scrollen müssen um Leerräume zu überwinden. Sei es, dass der Inhalt über die vorgegebene Höhe hinausgeht.

    Da hast du Recht, so ganz ohne ist diese zwingende Höhe nicht immer. Deshalb verwende ich sie auch nicht auf allen Seiten. Doch zB beim Header macht das schon Sinn. Und bei "Über mich" will ich nicht, dass man alles gleich auf den ersten Blick sieht.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden