Frage Div in voller Höhe und Breite

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

morkos89

Neues Mitglied
16 Mai 2019
1
0
1
30
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
 

Anhänge

MrMurphy

Senior HTML'ler
28 Juli 2009
1.481
216
63
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.
 
Werbung:

Latest posts