Footer trotz position: absolute, eine Breite von 100% geben.

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

  • Footer trotz position: absolute, eine Breite von 100% geben.

    Jo Leute.
    Ich schaffe es einfach nicht meinem Footer eine Breite von 100% zu verpassen wenn ich position: absolute nutze um es immer am unteren Browserrand anzeigen zu lassen.

    Kann mir da wer aushelfen?
    Link: thouz.de

    CSS:

    CSS-Quellcode

    1. /* LESS Document */
    2. // VARIABLEN
    3. @bgcolor: #EF3B24;
    4. @link: #231F20;
    5. @text: #888588;
    6. @font: 'Gudea', sans-serif;
    7. //MAIN CSS/Reset
    8. body, html {
    9. /*background: radial-gradient(ellipse at center, #ffffff 0%,#e5e5e5 100%) fixed;*/
    10. background-color: #FFF;
    11. padding: 0;
    12. margin: 0;
    13. }
    14. //STYLES
    15. a {
    16. text-decoration: none;
    17. color: @link;
    18. -webkit-transition: color 500ms ease-in-out;
    19. -moz-transition: color 500ms ease-in-out;
    20. -o-transition: color 500ms ease-in-out;
    21. transition: color 500ms ease-in-out;
    22. }
    23. a:hover {
    24. color: #FFF;
    25. border-top: 5px solid @link;
    26. }
    27. a#logo {
    28. font-weight: bold;
    29. }
    30. header {
    31. background-color: @bgcolor;
    32. height: auto;
    33. width: 100%;
    34. padding: 3px 25px;
    36. font-family: @font;
    37. font-size: 20pt;
    38. }
    39. footer {
    40. background-color: @bgcolor;
    41. height: auto;
    42. widht: 100% !important;
    43. padding: 3px 25px;
    44. position: absolute;
    45. bottom: 0px;
    46. left: 0px;
    48. font-family: @font;
    49. font-size: 15pt;
    50. text-align: center;
    51. }
    Alles anzeigen


    HTML

    HTML-Quellcode

    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta name="description" content="LUECKENFUELLER LUECKENFUELLER">
    5. <meta name="keywords" content="LUECKENFUELLER">
    6. <meta name="author" content="LUECKENFUELLER LUECKENFUELLER">
    7. <meta charset="utf-8">
    8. <title>Thouz.de</title>
    10. <link rel="stylesheet/less" type="text/css" href="style/style.less">
    11. <link href='http://fonts.googleapis.com/css?family=Gudea' rel='stylesheet' type='text/css'>
    12. <script src="style/less.js" type="text/javascript"></script>
    13. </head>
    15. <body>
    16. <header>
    17. <a href="#" title="LUECKENFUELLER" id="logo"> Thouz.de </a>
    18. </header>
    19. <div id="content">
    20. Content Bereich!
    21. </div>
    22. <footer>
    23. The Footer
    24. </footer>
    25. </body>
    26. </html>
    Alles anzeigen