div hight:100% im float-element

  • geschlossen
  • HTML & CSS

  • corema
  • 2645 Aufrufe 6 Antworten

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

  • div hight:100% im float-element

    alohahe,
    ich hab hier folgendes problem
    ich hab ein

    HTML-Quellcode

    1. <style>
    2. .userpanel{
    3. margin-top:110px;
    4. float:right;
    5. }
    6. .userpanel_box{
    7. background: transparent;
    8. float:right;
    9. }
    10. .userpanel_more{
    11. float:right;
    12. height:100%;
    13. border:1px solid red;
    14. width:100px;
    15. }
    16. </style>
    17. <div class="userpanel">
    18. <div class="userpanel_box">......</div>
    19. <div class="userpanel_more"></div>
    20. </div>
    Alles anzeigen

    userpanel ist ein float-element und hat deshalb eigentlich die höhe null
    jetzt hätte ich nun gerne, dass userpanel_more genau so groß ist, wie serpanel_box, dessen größe nach dem inhalt bestimmt wird.
    hätte es ja gerne mit hight:100% gemacht, funktioniert aber naturlich nicht. entweder bleibt die höhe bei null oder hat die selbe höhe wie der bod-tag. das hängt vom doctype ab.
    hat da jemand eine schlaue idee wie ich das anstellen kann, so dass beide größen abhängig von der größe von userpanel ist?
    die höhe einfach fest zu setzten wäre zu starr.

    danke schon mal
    gruß

  • Hi,
    erstmal zum Thema 100%: freesoft-board.to/f291/geschlo…a-470889.html#post4631416

    Dann habe ich hier mal ein Beispiel, wie das aussehen könnte.

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <title>Corema</title>
    5. <style type="text/css">/*<![CDATA[*/
    6. html,body {
    7. height:100%;
    8. margin:0;
    9. padding:0;
    10. }
    11. .userwrapper {
    12. overflow:hidden;
    13. height:100%;
    14. }
    15. .userpanel {
    16. margin-top:4%;
    17. float:right;
    18. background-color:red;
    19. height:96%;
    20. }
    21. .userpanel_box {
    22. background: transparent;
    23. float:right;
    24. background-color:blue;
    25. }
    26. .userpanel_more {
    27. float:right;
    28. height:100%;
    29. border:1px solid red;
    30. width:100px;
    31. background-color:yellow;
    32. }
    33. /*]]>*/</style>
    34. </head>
    35. <body>
    36. <div class="userwrapper">
    37. <div class="userpanel">
    38. <div class="userpanel_box">......</div>
    39. <div class="userpanel_more"></div>
    40. </div>
    41. </div>
    42. </body>
    43. </html>
    Alles anzeigen

    .userwrapper ist sozusagen dein "main"-div, bzw. das Mutter-Element, wo du das ganze unterbringen willst. Außerdem ist es ungünstig, wenn du mit % arbeiten willst, fixe Werte für border,margin oder padding zu benutzen, da ein Browser sowas auf die % drauf schlägt (height:50% = 50%+border-top+border-bottom+margin-top+....)
    Tipp: Anstatt border vielleicht outline benutzen ;)

    Hoffe, ich konnte dir weiterhelfen.

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • corema schrieb:

    hm leider funktioniert das nicht


    Was funktioniert nicht? Obiger Code ist mit Opera, Fx, IE, Chrome und Safari getestet und bewerkstelligt doch auch das, was du beschrieben hast, oder nicht?
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • die größe von userpanel_box wird zwar vom inhalt bestimmt, aber userpanel_more hat nicht die selbe höhe wie userpanel_box.

    ich hab bei userpanel_box height:100%; dadurch wurde wurden bei divs an die höhe von userpanel bzw userwrapper angepasst und sind gleich groß.
    die höhe wird dadurch aber nicht mehr vom inhalt bestimmt. sondern von der größe von userpanel.
    jetzt wäre es super, wenn die sich die größe vom von userpanel von userpanel_box abhinge.
    dafür müsste bei userpanel_box height:100% raus, doch dann wären wir wieder am da wo wir vorher waren.

    danke für deine hilfe
    gruß corema

  • corema schrieb:


    jetzt wäre es super, wenn die sich die größe vom von userpanel von userpanel_box abhinge.
    dafür müsste bei userpanel_box height:100% raus, doch dann wären wir wieder am da wo wir vorher waren.


    Den ersten Satz verstehe ich leider nicht ^^"

    Aber hast du mal versucht, min-height zu nehmen und die beiden boxen in einander zu verschachteln?

    Dann wäre nur noch userwrapper die Grenze.

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • irgentwas mal wieder doppelt gemoppelt
    wie ist es damit^^:
    jetzt wäre es super, wenn die sich die größe von userpanel nach userpanel_box richtet.


    min-height geht nicht, weil wenn *_box größer als min-height ist, bleibt *_more kleiner.

    ineinanderschachteln würde funktionieren, wenn *_more nicht einen anderen hintergrund hat als *_box. das wäre dann ja so in etwa wie userpanel und userpanel_box zu einander verhalten. noch margin/padding dazu und .... voila

    gruß
    corema

    EDIT: obwohl...... moment! lass mich dazu was ausprobieren....

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von corema ()