Frage Div in voller Höhe und Breite

[morkos89]

Hallo,

ich bin relativ unerfahren und realisiere grade meine erste Website.
Ich habe ein paar fragen zu dem stylen meiner Divs.
Der Anzeigebereich soll immer bis zum äußeren Rand (dem Browserfenster) und mindesten bis zum unteren Browserrand gehen (es sei den der Inhalt wird länger).

Ich habe dies schon mit einer höhe von 100% versucht, allerdings ist die Site dann zum Scrollen, da anscheinend auch die Höhe der Kopfzeile hinzugerechnet wird.

Hat jemand eine Idee wie ich es hinbekomme? Ein Bild und ein Archiv von meinen Dateien habe ich im Anhang beigefügt.

Ich freue mich auf eure Lösungsvorschläge.

LG Felix

 

[MrMurphy]

Das wird schwierig werden oder gar nicht funktionieren.

In HTML und CSS ist so eine Darstellung überhaupt nicht vorgesehen.

Deshalb haben findige Webseitenentwickler dafür verschiedene Lösungen entwickelt, die aber alle Nachteile haben.

Die laufen unter dem Begriff "Sticky Footer". Danach kannst du ja mal suchen um weitere Informationen zu bekommen. Laß dich nicht durch den Begriff "Footer" irritieren, die funktionieren auch ohne Footer.

Unter HTML4 wurde das mit float gelöst. Nachteil: Die Höhe von einem Header und einem eventuellen Footer müssen bekannt sein. Bei einem responsiven Layout, dass auf allen möglichen Bildschirmen vom Smartphone bis zum großen Desktop funktionieren soll geht das deshalb nicht.

Du verwendest leider XHTML, welches bereits vor 11 Jahren offiziell beerdigt wurde, seitdem nicht mehr weiterentwickelt wird und nicht mehr verwendet werden soll.

Mit HTML5 und CSS3 wurden neue Möglichkeiten wie Flexbox und CSS-Grid eingeführt. Mit denen ist ein Sticky Footer einfacher und flexibler zu erstellen. Auch wenn er noch immer nicht direkt in HTML5 und CSS3 vorgesehen ist.

Falls du einen Sticky Footer realisieren willst und die Seite nicht nur auf Desktop-Bildschirmen angezeigt werden soll solltest du auf HTML5 und CSS3 umsteigen. Ansonsten musst du eine der alten eingeschränkten Sticky-Footer-Lösungen verwenden.

 

[morkos89]

Super Tipp. Hat alles geklappt so wie ich wollte und ich habe viel gelernt.

Ich habe jetzt dass Problem, dass mein Menü aber nicht mehr richtig dargestellt wird. Liegt das an dem Flex?
ich hab es schon mit verschiedenen display optionen oder mit padding und text-align probiert....

Hat jemand ne Idee woran es liegen kann?

 

[MrMurphy]

Hat jemand ne Idee woran es liegen kann?

Klar.

In dem Fall verwendest du ein ein ul-Element. Ohne weitere Angaben hat es einen linken Innenabstand (padding-left) von 40px. Den musst du auf 0px setzen.

 

[morkos89]

omg. Ich bin seit einem Tag da am rumprobieren und dann hab ich es einfach vergessen. Danke für die Antwort. Jetzt sieht es eigentlich schon aus wie es aussehen soll.

Dann kann ich jetzt mit dem Inhalt weitermachen