Mitscrollendes Footer

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Mitscrollendes Footer

    Hallo!
    Ich habe mich hier angemeldet, in der Hoffnung das mir jemand helfen kann :)
    Auf meiner Site soll sich ein Balken in 100% iger Länge durchziehen und am Boden des Brwoserfensters sitzen. Er soll mit dem Content mitscrollen. dh dass dieser immer am Browserfensterende sitzt, egal wie lang der Content ist oder wie gross die Auflösung des Monitors.Der Balken muss sich also "mitscrollen". Ist das noch mit CSS möglich ohne JS verwenden zu müssen?? Und wie code ich das?! Ich brauche driiiiiiiingend HILFE bin bisschen aufgeschmissen :(

    Vielen Dank
    JEN

  • Entweder du machst den Content in einen overflow:auto Container oder du setzt den footer mit position:fixed wobei letzteres die «richtige» Lösung wäre aber IMO mit IE < 7 probleme macht
    There are only 10 types of people in the world: Those who understand binary, and those who don't.

    Download meines ersten Spiels:HIER
    Über Feedback würde ich mich freuen ;)

  • Hallo Danke für die Antwort! Ich habe es mit div fixed gemacht aber beim ie funktioniert das scrollen nicht :-/ er scrollt mir dann nur den content und er soll aber die ganze seite an sich scrollen also das der scroller im grossen fenster ist. bei firefox läuft es optimal :-/ da noch ne idee? (kann mimr auch jmd sagen wieso mein schwarzer bg nicht komplett über den content geht? wenn ich den content scrolle fehlt der bg :( also meine 100%tige höhe nimmt er nicht an. (s.code)

    hier mal mein kompletter css code

    Quellcode

    1. body { margin:0px;
    2. color:#FFFFFF;
    3. background-image:url(pix/bg_kreativ.jpg);
    4. padding:0 0 105px 0;
    5. font-family:Verdana;
    6. height:100%;}
    8. #container { position: absolute;
    9. width: 1000px;
    10. height:100%;
    11. top: 20px;
    12. left: 50%;
    13. margin-left: -500px;
    14. background-color:#000000;}
    16. #main-navi-top { position:absolute;
    17. margin-top:20px;
    18. margin-left:25px;
    19. display:inline;
    20. height:45px;
    21. }
    23. #headerbereich { position:absolute;
    24. margin:45px 0 0 0px;
    25. height:200px;
    26. width:1000px;
    27. background-image:url(pix/head_kreativ.jpg);
    28. background-position:right;
    29. background-repeat:no-repeat;
    30. border-bottom:1px solid #ff6c00;
    31. border-top:1px solid #ff6c00;
    32. }
    34. #main-navi-gruppe { position:absolute;
    35. margin:35px 0px 0px 20px;
    36. display:inline;}
    38. #headline { position:absolute;
    39. margin-left:25px;
    40. margin-top:140px;
    41. width:340px;
    42. height:50px;
    43. background-image:url(pix/h_krea.gif);
    44. background-repeat:no-repeat;
    45. font-size:11px;
    46. line-height:17px;
    47. }
    49. #content { position:absolute;
    50. margin:350px 25px 0px 25px;
    51. height:500px;
    52. text-align: justify;
    53. font-family:Verdana;
    54. font-size:11px;
    55. line-height:16px;
    56. left: -1px;
    57. top: -28px;
    58. }
    59. #spalte1 {float:left; width:300px; margin-right:25px;}
    60. #spalte2 {float:left; width:300px; margin-right:25px;}
    61. #spalte3 {float:left; width:300px;}
    63. div#footer { position:absolute;
    64. bottom:0;
    65. left:0;
    66. width:100%;
    67. height:59px;
    68. background-image:url(pix/bottom_bg.gif);
    69. }
    71. @media screen{ body>div#footer{ position: fixed; } }
    73. * html body { overflow:hidden; }
    75. * html div#content{ height:100%; overflow:auto; }
    77. /*
    78. LINK
    79. */
    80. a { font-family:Verdana;
    81. font-size:11px;
    82. font-weight:bold;
    83. color:#e1dbd6;
    84. text-decoration:none;
    85. margin-right:30px;}
    87. a:hover { color:#FF6600;}
    89. a.topmenue { font-family:Verdana;
    90. font-size:11px;
    91. font-weight:bold;
    92. text-transform:uppercase;
    93. color:#e1dbd6;
    94. text-decoration:none;
    95. margin-right:30px; /*border:1px solid red;*/ }
    97. a.topmenue:hover { color:#000000; background-color: #ff6c00;}
    99. img {border:none; margin-right:-30px}
    101. .subnavi { position:absolute;
    102. margin-top:210px;
    103. margin-left:25px;
    104. }
    Alles anzeigen

  • Wegen den 100% schau dir mal diese Seite an: xhtmlwiki.de/Seite_auf_100%25_H%C3%B6he

    position:fixed für Internet Explorer 6 implementierst du so: de.selfhtml.org/css/layouts/fixbereiche.htm#fixiert_ie

    Quellcode

    1. <!--[if lt IE 7]><style type="text/css">
    2. @media screen {
    3. html, body {
    4. height: 100%; overflow-y: hidden;
    5. }
    6. #Scrollbereich {
    7. height: 100%; width: 100%; overflow: auto;
    8. }
    9. #Inhalt {
    10. position: static;
    11. }
    12. }
    13. </style><![endif]-->
    Alles anzeigen


    Zunächst wird für den Anzeigebereich eine Höhe von 100% definiert und über die erst für CSS 3 vorgesehene Eigenschaft overflow-y:hidden ein (doppelter) vertikaler Scrollbalken verhindert. Im HTML-Quelltext wurden die zu scrollenden Elemente bereits in einem div#Scrollbereich gruppiert, das nun den gesamten Anzeigebereich ausfüllen soll und über overflow:auto die Scrollfunktion übernimmt. Der hierin enthaltene Inhaltsbereich ist explizit position:static zu definieren, auch wenn dies eigentlich dem Initialisierungswert entspricht.
    Das div#fixiert mit der Navigation ist im HTML-Quelltext außerhalb des nun scrollbaren Elementes notiert und (für den Internet Explorer bis zur Version 6) bereits absolut positioniert, wodurch es vom Scrollen ausgeschlossen wird und auf diese alternative Weise am Bildschirm fixiert ist.