weird margin?

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

  • weird margin?

    Hi

    ich habe eine kleine Frage an euch. Und zwar möchte ich ein Template bauen, bei dem zuerst ein DIV kommt mit Höhe 100%, das beim Scrollen jedoch fixiert bleibt. Sprich meine Datei schaut ungefähr so aus:

    Quellcode

    1. <!doctype html>
    2. <html>
    3. <head>
    4. <style type="text/css">
    5. html, body {
    6. margin:0;
    7. padding:0;
    8. outline:0;
    9. position:relative;
    10. width:100%;
    11. height:100%;
    12. }
    13. .aDiv {
    14. width:100%;
    15. height:100%;
    16. position:fixed;
    17. top:0;
    18. left:0;
    19. background:red;
    20. }
    21. .bDiv {
    22. position:relative;
    23. margin-top:100%;
    24. height:100%;
    25. background:blue;
    26. }
    27. </style>
    28. </head>
    29. <body>
    31. <div class="aDiv">
    32. asdf
    33. </div>
    34. <div class="bDiv">
    35. asdf
    36. </div>
    37. </body>
    38. </html>
    Alles anzeigen

    Das komische und damit der Teil den ich nicht verstehe ist:
    1. warum ist aDiv größer als es sein dürfte?
    2. warum hat bDiv einen größeren margin-Wert als ich angegeben habe? Denn die Prozentangabe bezieht sich ja auf das parent-Element ( = hier body) und das ist mit 100% definiert.
    Das wirklich merkwürdige ist aber, dass sich der margin-Wert ändert, wenn man den Browser verkleinert. Nicht von der Höhe, sondern die Breite verkleinert, dann wandert das DIV nach oben.

    Bin für jede Idee offen, aber ich möchte das unbedingt verstehen :)

    Grüße, freeek