[CSS] Höhe zweier DIVs automatisch angleichen

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

  • [CSS] Höhe zweier DIVs automatisch angleichen

    Hallo allerseits,

    wie in Bild 1 im Anhang erkennbar gestalte ich gerade ein Forum. Die Anzeige der Beiträge der Benutzer macht mir jedoch mit meinen stümperhaften CSS-Kentnissen so einige Probleme. Aktuell beschäftigt mich die Frage, wie ich bei folgender Struktur erreichen kann, dass die Haarlinie zwischen den Informationen zum Autor und seinem Beitrag durchgehend angezeigt wird. Dafür müsste die Höhe beider DIVs gleich sein, also quasi height: 100%; - das funktioniert nur bei mir nicht. Vielleicht kann mir jemand einige best-practices dazu empfehlen? Die üblichen Quellen haben bei mir nichts ergeben, was hier anzuwenden wäre. Danke!

    Quellcode

    1. <div class="posting">
    2. <div class="user">
    3. <div class="avatar">
    4. <img src="http://blutorden-konsortium.de/files/keinavatar.png" alt="Avatar von Dimebag" />
    5. </div>
    6. <div class="nickname"><a href="http://blutorden/index.php?module=users&action=viewuser&id=127"><span>Dimebag</span></a></div>
    7. <div class="guild">Blutorden</div>
    8. <div class="rank"></div>
    9. </div>
    10. <div class="text"><p>Ich werde von Sonntag, dem 6.7. bis Dienstag den 8.7 nicht da sein, da ich dort auf meinem Abschlusszelten bin.</p></div>
    11. <br clear="both" />
    12. </div>
    13. <div class="posting alternate">
    14. <div class="user">
    15. <div class="avatar">
    16. <img src="http://blutorden-konsortium.de/files/88a690c93dcd00ee59bda2692b4c1ecd.png" alt="Avatar von Effendi" />
    17. </div>
    18. <div class="nickname"><a href="http://blutorden/index.php?module=users&action=viewuser&id=1"><span>Effendi</span></a></div>
    19. <div class="guild">Blutorden</div>
    20. <div class="rank"></div>
    21. </div>
    22. <div class="text"><p>&nbsp;Viel Spa&szlig; :)</p></div>
    23. <br clear="both" />
    24. </div>
    Alles anzeigen

    Quellcode

    1. /* Posting layout */
    3. .posting {
    4. width: 99%;
    5. overflow: hidden;
    6. position: relative;
    7. border: 1px solid #ccc;
    8. margin: 10px 0 0 0;
    9. padding: 0;
    10. }
    12. .posting .user {
    13. height: 100%;
    14. float: left;
    15. width: 18%;
    16. text-align: center;
    17. padding: 10px 0 10px 0;
    18. }
    20. .posting .user .avatar img {
    21. margin: 0 0 10px 0;
    22. padding: 0;
    23. width: 45px;
    24. height: 45px;
    25. }
    27. .posting .user .nickname {
    28. font-weight: bold;
    29. }
    30. .posting .user .nickname a {
    31. text-decoration: none;
    32. }
    33. .posting .user .guild {
    34. display: none;
    35. font-size: 90%;
    36. color: #666;
    37. }
    38. .posting .user .rank {
    40. }
    42. .posting .text {
    43. height: 100%;
    44. border-left: 1px solid #ccc;
    45. width: 78%;
    46. float: right;
    47. padding: 10px;
    48. text-align: justify;
    49. }
    51. .alternate {
    52. background-color: #f1f1f1;
    53. }
    Alles anzeigen
    Bilder

    • Bild 1.png

      77,02 kB, 702×483, 453 mal angesehen

  • Wie du schon ganz richtig festgestellt hast, ist das Problem so - leider - nicht lösbar, da die CSS-Eigenschaft height mit 100% bei div-Containern keine Wirkung zeigt.

    Deshalb habe ich folgenden Lösungsvorschlag für dich:
    Erstelle eine 1*1px große, schwarze Grafik, die später als Trennlinie zwischen Avatar, etc. und Text fungiert. Nun positionierst du diese als Hintergrund in deinem .posting-div-Layer so, dass sie mit vertikaler Wiederholung eine Linie ergibt und die Rahmen-Eigenschaft überflüssig macht. Das mal mit Beispiel-Code verdeutlicht.

    Quellcode

    1. .posting {
    2. background: url("ein/pixel/große/grafik.gif") repeat-y 20px 0;
    3. }


    Mehr zum festlegen einer Hintergrundgrafik per CSS findest du unter folgendem Link: css4you.de/backgroundproperty.html