CSS: von Div mit Höhe 100% etwas abziehen

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

  • CSS: von Div mit Höhe 100% etwas abziehen

    Hallo alle zusammen
    Ich möchte auf einer Seite die Fußzeile immer unterhalb vom Content haben, jedoch immer mindestens am unterem Bildschirmrand.
    Ich hab s nach einigem Suchen auch hingebracht, dass ich ein DIV über die ganze Seite gehen lasse. Allerdings drängt es dann den DIV, der danach kommen würde, aus dem Bild und ich muss scrollen. Ist der Inhalt länger als eine Bildschirmseite, funktioniert alles.
    Ich möchte jetzt von denn 100% Höhe, die der Div hat, die entsprechenden Anteile des Headers und Footers abziehen, um im Endeffekt wieder auf eine komplette Seite zu kommen.
    Ist das so möglich?

    Hier der CSS Code für die 100% Höhe

    Quellcode

    1. html, body {
    2. background-color: #333333;
    3. margin: 0;
    4. padding: 0;
    5. height: 100%; /* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */
    6. }
    8. #wrapper {
    9. background-color: #FFFFFF;
    10. width: 80%;
    11. margin: auto; /* Div soll zentriert werden */
    12. min-height: 100%; /* Mindesthöhe für moderne Browser */
    13. height:auto !important; /* Important Regel für moderne Browser */
    14. height:100%; /* Mindesthöhe für den IE */
    15. overflow: hidden !important; /* FF Scroll-leiste */
    16. }
    Alles anzeigen


    Vielen Dank schon mal!

  • Ich hab s jetzt auf umwegen gelöst

    Hier meine Lösung

    Quellcode

    1. <div class="root">
    2. <div class="content">CONTENT</div>
    3. <div class="footer">FOOTER</div>
    4. </div>


    Quellcode

    1. html, body {
    2. margin:0px;
    3. padding:0px;
    4. height: 100%; /* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */
    5. }
    6. .root {
    7. position:relative;
    8. width:1000px;
    9. min-height: 100%; /* Mindesthöhe für moderne Browser */
    10. height:auto !important; /* Important Regel für moderne Browser */
    11. height:100%; /* Mindesthöhe für den IE */
    12. overflow: hidden !important; /* FF Scroll-leiste */
    13. }
    14. .content {
    15. width:1000px;
    16. margin-bottom:40px;
    17. }
    18. .footer {
    19. width:1000px;
    20. height:40px;
    21. bottom:0px;
    22. position:absolute;
    23. }
    Alles anzeigen


    Dass funktioniert so auch, aber wenn jemand noch eine bessere Lösung für mich hat, wäre ich sehr froh!

    Lu