Rahmen um responsive Design mit variablen Sticky Footer

  • Hallo Leute,


    das ist mein erster Besuch in diesem Forum und ich habe auch gleich mal eine Frage, auf welche ich bisher leider keiner Antwort gefunden habe.


    Ich habe ein responsives Design mit einem variablen Footer, der immer unten im Browser angezeigt wird. Ich habe mich hierbei für diese Version entschieden, da hier der Footer keine feste Höhe benötigt, was bei Responsive sehr angenehm ist.


    Funktioniert auch alles ganz super - ABER:
    Ich möchte einen Rahmen und um die Seite, dieser hört aber nach dem Content auf und fährt nicht bis zum Ende durch.
    Wie bekomme ich das hin?


    Hier der Quellcode


    Ich komme einfach nicht dahinter. ?( Mit fixer Höhe vom Footer würde es gehen, da es aber responsive sein soll, ist das nicht möglich, da sich die Größe des Inhaltes vom Footer immer ändert.


    Hat jemand eine Idee?
    Oder kennt vielleicht jemand eine andere Sticky-Footer-Lösung mit variabler Höhe?


    Vielen Dank für eure Mühe und Hilfe im Voraus.


    LG
    Mario

  • Hallo.


    Danke für die Antwort.


    Wenn ich dem Body einen Border gebe (z.B. links und rechts), dann erscheinen diese doch am linken und rechten Rand im Browserfensters - das ist so aber nicht gewollt.


    Vielleicht zum einfacheren Verständnis zum oben genannten HTML-Code eine Vorschau im Anhang, wie es aussehen sollte.
    html-seminar.de/woltlab/attachment/742/

    position: absolute;


    Dann funktioniert aber der StickyFooter mit variabler Höhe nicht mehr...

  • Ahh jetzt verstehe ich was du willst...
    Dein 'Sticy' footer ist meines Wissens mit css nicht anders umsetzbar als du es bisher gemacht hast.. Footer position


    Und wofür willst du da ne border? :D


    naja
    header-> border left,top,right
    content-> border left,right
    footer-> border top


    Das sollte dir helfen, oder aber ne box um header und content -> bordern und footer border top?

  • Hallo wolf,


    danke für deine Antwort und deine Mühe.


    Irgendwie funktioniert das nicht ganz oder ich bin zu doof :huh:



    Border um Header und Footer geht klar, das passt auch soweit alles.
    Allerdings haben die Border im Content-Bereich immer nur die Höhe des Inhaltes und gehen nicht bis zum Footer durch. Also die Border sollten unabhängig vom Inhalt immer zusammenschließen.
    Ist das irgendwie verständlich? :D


    Also der Header soll vom Browserrand ca. 10px Abstand nach oben haben und einen Border oben, links und rechts.
    Der Content soll einen Border links und rechts haben, welche immer bis nach unten zum Footer gehen, unabhängig vom Inhalt.
    Der Footer soll die komplette Breite des Browsers einnehmen und einen Border oben haben.


    Bis auf das, dass der Border vom Content-Bereich nicht bis nach unten zum Footer geht, wenn der Inhalt kleiner ist, funktioniert ja auch alles...

  • Dein Inhaltscontainer wird wenn du nicht manuell nachhilfst immer die Höhe des Inhalts haben, die dieser halt einnimmt - spontan würde mir einfallen, dem Container, der den Rahmen haben soll, ein

    CSS
    min-height: calc(100vh - x);


    zu geben, wobei x die Höhe des footers sein sollte (+ ggf. weitere fixe Abstände).

  • Was dir evtl. auch weiterhelfen könnte sind die Pseudoelemente :before und :after , wenn es rein um den Rahmen geht.



    Werde mich später mit einem Code-Beispiel nochmal melden :)



    So, hoffe ich habe das ganze richtig verstanden:



    Hier habe ich nur einen Rahmen um den Inhalt gelegt, dem ich die Pseudoelemente übergebe.



    Oben habe ich nicht viel verändert, nur der Klasse .grid wurde ein Innenabstand mitgegeben, damit sie sich mit dem Rahmen nicht überlappt.
    Zudem wurde die jetzt sinnlose Klasse .rahmen einfach rausgenommen. Der Rahmen wird hier durch die von mir neu hinzugefügten Pseudoelemente
    :after und :before umgesetzt. Hoffe das hilft dir weiter ;)



    mfg Nita

  • Hallo Nita.


    Perfekt, auf diese Idee wäre ich nie gekommen...manchmal denkt man einfach zu kompliziert ;)


    Wenn ich jetzt ganz oben zwischen Rahmen und Browser noch einen Abstand mache, dann rutschen die seitlichen Border in den Footer hinein.
    Aber das müsste ich einfach verstecken können, indem ich dem Footer einfach einen z-index verpasse...?!


    Vielen lieben Dank an ALLE!!!


    LG
    Mario



    EDIT:
    OK, also damit oben zwischen Rahmen und Browserfenster ein kleiner Abstand bleibt, habe ich jetzt dem Wrapper ein margin-top: 10px; zugewiesen in bei wrapper:before und wrapper:after = bottom: 10px; zugewiesen....dürfte funktionieren ;)

Jetzt mitmachen!

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