Blutiger Anfänger - möchte ein div immer bis zum Unteren Bildschirm reichen lassen.

[Feyrah]

Hallo ihr lieben!

Beim Gestalten meiner Website bin ich euf ein Problem gestoßen, dass ich einfach nicht lösen kann.
ich möchte hier, dass das beige Feld immer bis zum unteren Bildschirmrand
geht, egal wie viel Inhalt die Seite zeigt. Ungefähr so. Ich habe leider nur ganz basisches Grundwissen und da sind
mit Sicherheit einige Fehler drin, aber ich komme einfach mit nichts weiter.
Es funktioniert nur, wenn der Inhalt auch wirklich lang genug ist, aber das möchte ich nicht. Auch die
zwei Linien sollen immer bis anch unten durchgezogen sein.
Das ist die erste Website, die ich selbst mache.

Eine andere Möglichkeit als Kompromiss wäre, es so beizubehalten wie es ist und Scrollbalken zu nutzen.
Wenn ich die aber anschalte, sehen die einfach total blöd aus.

Ich bin ein wenig hilflos und hoffe ihr könnt mir helfen!

Liebe Grüße,
Fey

 

[threadi]

Du müsstest quasi für html und body die Höhe auf 100% setzen. Also:

html, body { height: 100%; }

Allerdings ergibt sich daraus für dich das Problem, dass Du die darinliegenden Elemente mit padding versehen hast. Dadurch entsteht immer ein Scrollbalken rechts. Du müsstest versuchen das Layout so umzubauen, dass Du auf diese paddings verzichten kannst.

 

[Feyrah]

Ui, jetzt gehts! Ich musste vor mein body nur "html" schreiben.
vorher wars nur:

body { height: 100%}

Darf ich fragen, was genau das bewirkt hat? =) Vielen lieben Dank!

 

[threadi]

Dadurch erhalten html und body (sind ja 2 HTML-Elemente) die Höhe 100%. Prozentangaben beziehen sich auf die Höhe des umgebenden Elementes. Das html-Element hat kein umgebendes Element und nimmt somit bei der Angabe 100% die Höhe des Viewports an - also der Webseite die im Browserfenster angezeigt wird. Das body-Element erbt diese Angabe dann durch die ebenfalls angegebenen 100%.