trunx: Layout mit Fusszeile

Hallo Forum,

hier http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm@title=http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm gibt es ein Muster für ein dreispaltiges css Layout mit Kopf und Fusszeile. Alles ganz schön und gut. Allerdings ist die Fusszeile nicht wirklich eine Fusszeile, sondern in diesem Fall vllt eine Bauchzeile. Nun meine Frage: wie erreicht man, dass auch bei wenig Inhalt die Fusszeile tatsächlich unten an der Browserkante positioniert ist (bei ausreichend Inhalt ist das ja kein Problem)? Und wie dehnt man den (leeren) Inhaltscontainer bis zur Fusszeile aus, z.B. für eine farbige Gestaltung? min-height wäre an sich eine gute Idee, wenn nicht Kopf-und Fusszeile bestimmte Höhen hätten, die man nicht so einfach von 100% abziehen kann...

bye trunx

--
Die Standard-Antwort: "Bitte benutze die Forum-Suche!" macht die Forum-Suche kaputt, weil die Suche dann nämlich genau vor allem diese dämliche Standard-Antwort, also Müll liefert. Sinnvoller ist stattdessen folgende Standard-Antwort: "Dieses Thema wurde schon vielfach im Forum besprochen, siehe z.B. <a>hier</a> oder <a>da</a> oder benutze die Forum-Suche z.B. mit den Stichworten 'Stichwort1 Stichwort2'." Danke.
  1. min-height wäre an sich eine gute Idee, wenn nicht Kopf-und Fusszeile bestimmte Höhen hätten, die man nicht so einfach von 100% abziehen kann...

    Doch kann man relativ einfach. Browserunterstützung ist zufriedenstellend.

    1. min-height wäre an sich eine gute Idee, wenn nicht Kopf-und Fusszeile bestimmte Höhen hätten, die man nicht so einfach von 100% abziehen kann...

      Doch kann man relativ einfach. Browserunterstützung ist zufriedenstellend.

      vielen Dank für den Tipp, allerdings funktioniert (soweit ich das sehe) calc() nur für height, aber nicht für min-height.

      --
      Die Standard-Antwort: "Bitte benutze die Forum-Suche!" macht die Forum-Suche kaputt, weil die Suche dann nämlich genau vor allem diese dämliche Standard-Antwort, also Müll liefert. Sinnvoller ist stattdessen folgende Standard-Antwort: "Dieses Thema wurde schon vielfach im Forum besprochen, siehe z.B. <a>hier</a> oder <a>da</a> oder benutze die Forum-Suche z.B. mit den Stichworten 'Stichwort1 Stichwort2'." Danke.
      1. vielen Dank für den Tipp, allerdings funktioniert (soweit ich das sehe) calc() nur für height, aber nicht für min-height.

        "The calc() CSS function can be used anywhere a <length> is required"

        1. vielen Dank für den Tipp, allerdings funktioniert (soweit ich das sehe) calc() nur für height, aber nicht für min-height.

          "The calc() CSS function can be used anywhere a <length> is required"

          schon recht, man müsste einerseits alle Vorgänger-Deklarationen rausnehmen und lesen können, der IE8 unterstützt calc() gar nicht (und nicht wie es zuerst bei mir den Anschein hatte nur für height), von daher ist das leider nicht nutzbar (denn soweit ich sehe, gibt es für ihn keine Alternative).
          Trotzdem danke nochmal.

          --
          Die Standard-Antwort: "Bitte benutze die Forum-Suche!" macht die Forum-Suche kaputt, weil die Suche dann nämlich genau vor allem diese dämliche Standard-Antwort, also Müll liefert. Sinnvoller ist stattdessen folgende Standard-Antwort: "Dieses Thema wurde schon vielfach im Forum besprochen, siehe z.B. <a>hier</a> oder <a>da</a> oder benutze die Forum-Suche z.B. mit den Stichworten 'Stichwort1 Stichwort2'." Danke.
  2. Hallo trunx,

    Nun meine Frage: wie erreicht man, dass auch bei wenig Inhalt die Fusszeile tatsächlich unten an der Browserkante positioniert ist (bei ausreichend Inhalt ist das ja kein Problem)? Und wie dehnt man den (leeren) Inhaltscontainer bis zur Fusszeile aus, z.B. für eine farbige Gestaltung? min-height wäre an sich eine gute Idee, wenn nicht Kopf-und Fusszeile bestimmte Höhen hätten, die man nicht so einfach von 100% abziehen kann...

    Der Suchbegriff lautet "sticky footer"

    Es gibt verschiedene Varianten - jede hat IMHO so ihre ganz eigenen Vor- & Nachteile.
    Die IMHO beste und "modernste" Variante ist die per "Flexbox". Hier hat man allerdings mit den verschiedenen Implementierungen in den einzelnen Browsern zu tun, dadurch dass dieses Jahr die Spec quasi nochmal komplett geändert wurde.

    Gruß Gunther