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

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • 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

    Source Code

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


    Vielen Dank schon mal!
  • Ich hab s jetzt auf umwegen gelöst

    Hier meine Lösung

    Source Code

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


    Source Code

    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. }
    Display All


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

    Lu