Ein Div immer ganz unten anzeigen / Ein Div in höhe dynamisch gestalten

  • CSS

Es gibt 6 Antworten in diesem Thema. Der letzte Beitrag () ist von jmb.96.

    Ein Div immer ganz unten anzeigen / Ein Div in höhe dynamisch gestalten

    Ja, ich hab schon wieder ein neues CSS-Problem.
    Um genau zu sein sogar 2 ^^ .

    Problem 1:
    Auf meiner Seite (Link links unter Avatar) gibt es einen Footer (nein, SOWAS...). Dieser ist ein einfaches, mit CSS designtes div (unglaublich, oder...?). Nun mein Problem: Der Footer wird einfach -nach dem restlichen Inhalt- angezeigt. Er soll aber einfach immer ganz unten in seinem Eltern-div angezeigt werden.
    Sowas wie

    CSS-Quellcode

    1. bottom: 0;

    oder

    CSS-Quellcode

    1. margin-bottom: 0;

    hab ich schon versucht, das funktionier aber nicht. Wie kriegt man sowas hin?

    Problem 2:
    ...ist etwas komplizierter.
    Rechts neben meinem Haupt-Inhalt (Div-id: Inhalt) soll es noch eine art Seitenleiste geben (Div-id: Sidebar). Diese ist nach rechts gefloatet, "Inhalt" und "Sidebar" werden von dem Footer daruner ge"cleart".
    So weit, so gut, doch nun das Problem: Diese Leiste ist natürlich nur so hoch, das es grade für den Inhalt reicht. Sie soll aber dynamisch vom header bis zum Footer reichen, height: 100% geht nicht.

    Ich hoffe ich habe das ganze einigermaßen verständlich erklärt, schon mal danke im vorraus für Hilfe.


    Mfg, jmb :)
    "People assume that time is a strict progression of cause to effect, but actually, from a non-linear, non-subjective viewpoint, it's more like a big ball of wibbly wobbly, ...timey wimey ...stuff."

    Zuerst: Kennst du vernünftiges Codeeinrücken? ^^
    Dann:

    HTML-Quellcode

    1. #footer {
    2. clear: both;
    4. max-width: 70em;
    5. max-height: 2em;
    6. padding: 0.6em 0.6em 0.6em 0.6em;
    7. margin-left: auto;
    8. margin-right: auto;
    9. margin-top: 2px;
    11. border: 2px solid #7f7f7f;
    12. -moz-border-radius:2px;
    13. -khtml-border-radius:2px;
    15. background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    16. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    17. background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    18. background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera11.10+ */
    19. background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
    20. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    21. background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
    22. background:url(images/formateGREEN/pattern.png), #000000;
    24. font-family: Arial;
    25. color: gray;
    26. }

    Wofür die 7 verschiedenen Gradient-Deklarationen, wenn du weiter unten ein Bild als Hintergrund setzt, und damit die Farbverläufe überschreibst? (Farbverläufe zählen auch als background-image, sie werden hier nur gar nicht dargestellt, auch unter dem Bild nicht)
    border-radius wird seit Firefox 3.x schon unterstützt, die Präfixe sind veraltet.
    Und wenn du willst, dass die div ganz unten sein soll, setz position auf absolute und bottom auf 20px.
    (Mach dann aber die ganzen margins weg)

    So. Jetzt erst mal eins nach dem anderen.
    1. Das Code-Einrücken? Hatte ich das nicht noch entfailt? wohl nicht... ^^
    2. die 7 st. sind für versch. Browser, wurden mir so vom colorziller-verlaufgenerator generiert. hab mal ausnahmsweise ge"copy&paste"ed.
    3. Das mit dem Bild funktioniert noch nicht ganz, später soll sich der Farbverlauf (von Schwarz zu transarent) über das Bild legen.
    4. Echt? hm.., dann wer ich mir das ma auf die todo-liste schreiben...
    5. oO? am unteren Rand und 20px Abstand vom unteren Rand sind nicht ganz vereinbar, oder?
    6. Warum? das margin-top is überfällig, aber die anderen Beiden sorgen für die Zentrierung.

    Mfg, jmb :)
    "People assume that time is a strict progression of cause to effect, but actually, from a non-linear, non-subjective viewpoint, it's more like a big ball of wibbly wobbly, ...timey wimey ...stuff."

    Na gut. Das stimmmt auch ^^
    Das Problem:
    Der Footer wird bei einer absoluten Positionierung von 20px Abstand vom Unteren Rand auch immer dort angezeigt. Dadurch befindet er sich nicht mehr in seinem Eltern-Div. Er sollte aber nur ganz unten in diesem angezeigt werden. Dafür gibt es aber meines Achtens nach keine Eigenschaft, das ist ja das Problem...

    Zur Seitenleiste hatte ich noch eine Idee: man müsste ja eigendlich nur unterhalb des Inhalts von dieser eine Art "Dynamischen Platzhalter" positioniern. Aber wie...?


    Mfg, jmb :)
    "People assume that time is a strict progression of cause to effect, but actually, from a non-linear, non-subjective viewpoint, it's more like a big ball of wibbly wobbly, ...timey wimey ...stuff."

    Eigendlich sollte ja der Footer die Divs "Inhalt" und "Sidebar" Clearen (Clear:both;), damit die Sidebar nur noch oben "Verankert" werden muss und sich so über die komplette Länge erstreckt. Aber egal, dann muss ichs anders machen. Das Größere Problem ist, das die beiden Divs durch die absolute Footer-Positionierung zum Teil hinter dem Footer sind. Man müsste ihre max-height also dynamisch anpassen, bzw. den Footer weiter nach unten verschieben.
    Das ließe sich gleich zummen mit noch einem eigendlich ganz einfachen Problem lösen: Der haupt-Div (Container, der gleiche wie der Elterndiv vom Footer) soll sich von ganz oben bis ganz unten im Browser erstrecken, und nicht nach demInhalt aufhören.



    Mfg, jmb :)
    "People assume that time is a strict progression of cause to effect, but actually, from a non-linear, non-subjective viewpoint, it's more like a big ball of wibbly wobbly, ...timey wimey ...stuff."

Facebook