1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

[ERLEDIGT] Div Höhe dynamisch anpassen

Dieses Thema im Forum "HTML, XHTML & CSS" wurde erstellt von kurzeFrage, 25 Juli 2013.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. kurzeFrage

    kurzeFrage Neues Mitglied

    Registriert seit:
    25 Juli 2013
    Beiträge:
    3
    Punkte für Erfolge:
    0
    Servus an alle!

    meine Frage lautet: Was muss ich in CSS einstellen, damit sich die Höhe von div2 automatisch den Höhen von div3 und div4 anpasst? Die Höhe von div2 soll also mindestens so groß sein, wie die größere Höhe von div3 und div4.
    Anmerkung: div1 und div5 sollen nur zeigen, dass sich noch etwas über und unter div2 befindet :)

    Hier der HTML-Code:
    <body>
    <div id="div1">
    </div>

    <div id="div2">
    <div id="div3">
    </div>
    <div id="div4">
    </div>
    </div>

    <div id="div5">
    </div>
    </body>


    und das, was ich bisher als CSS habe, das aber leider nicht richtig ist.. :(
    #div1{
    height: 50px;
    background-color: #808080;
    position: relative;
    }
    #div2{
    position: relative;
    min-height: 10px;
    height: auto;
    width: 100%;
    top: 40px;
    background-color: #FF0000;
    }
    #div3{
    position: relative;
    height: 50px;
    width: 5%;
    left: 15%;
    float: left;
    background-color: yellow;
    }
    #div4{
    position: relative;
    height: 50px;
    background-color: green;
    float: right;
    width: 20%;
    }
    #div5{
    clear: both;
    position: relative;
    height: 70px;
    background-color: #808000;
    top: 20px;
    }

    Vielen Dank schon mal! :)
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. hfb

    hfb Neues Mitglied

    Registriert seit:
    22 Mai 2010
    Beiträge:
    21
    Punkte für Erfolge:
    0
    Du darfst nicht dem div5 das "clear:both" geben, sondern einem weiteren div innerhalb(!) von div2.

    HTML:
    1. <div id="div1"> </div>
    2. <div id="div2">
    3.   <div id="div3"> </div>
    4.   <div id="div4"> </div>
    5. <div style="clear:both;"></div>
    6. </div>
    7. <div id="div5"> </div>
    8.  
    9.  
    So sollte es gehen.

    Das neue div kannst Du natürlich auch wie bisher mit id versehen und im Stylesheet definieren, statt wie im Beispiel direkt im HTML-Code.
    Das "clear:both" im #div5 nimmst Du raus, da es dann überflüssig ist.

    HTH
    Alex
     
  3. jesterhead

    jesterhead Guest

    Das einzige Problem ist hierbei das float:right von #div4. Lass das weg und schon hast du beide Kästen wirklich innerhalb des #div2-Containers, der sich dann auch über height:auto tatsächlich an die Höhe des größeren, eingebetteten Containers anpasst.

    EDIT: #div3 wird dann noch von #div4 verdeckt, also width anpassen!
     
  4. djheke

    djheke Aktives Mitglied

    Registriert seit:
    8 Februar 2012
    Beiträge:
    882
    Punkte für Erfolge:
    28
    div2 benötigt noch ein overflow:hidden.
     
  5. kurzeFrage

    kurzeFrage Neues Mitglied

    Registriert seit:
    25 Juli 2013
    Beiträge:
    3
    Punkte für Erfolge:
    0
    Leider passt keine Lösung zu 100%

    Also vielen Dank erstmal für die schnellen und netten Antworten, nur leider ist keine davon 100% richtig. Vielleicht liegt das aber auch an meiner Beschreibung.

    Meine Frage war ja, dass sich div2 automatisch der Höhe von div3 bzw div4 anpasst. Was ich nicht ausdrücklich gesagt habe, ist dass div5 sich natürlich mit verschieben soll!

    Wenn es nur um die Anpassung der Höhe gehen würde, dann könnte ich bei div2 auch einfach position: absolute setzen und fertig.

    Bis jetzt habe ich also keine Lösung dafür, dass sich
    1. div2 der Höhe von div3 bzw div4 anpasst UND
    2. div5 immer einen bestimmten Abstand zu div2 beibehält.
     
  6. djheke

    djheke Aktives Mitglied

    Registriert seit:
    8 Februar 2012
    Beiträge:
    882
    Punkte für Erfolge:
    28
    Na es funktioniert doch so wie du es möchtest. Abgesehen davon ist mir der Sinn nicht ganz klar.
    Code (text):
    1.  
    2.  
    3. <!DOCTYPE HTML>
    4.  
    5. <html>
    6. <head>
    7. <meta charset="UTF-8" />
    8. <title>Test-Layout</title>
    9. <style type="text/css">
    10.  
    11. *  {
    12.  margin:0;
    13.  padding:0;
    14.  list-style:none;
    15. }
    16.  
    17. #div1{
    18. height: 50px;
    19. background-color: #808080;
    20. position: relative;
    21. }
    22. #div2{
    23. min-height: 10px;
    24. overflow:hidden;
    25. width: 100%;
    26. top: 40px;
    27. background-color: #FF0000;
    28. }
    29. #div3{
    30. position: relative;
    31. min-height: 50px;
    32. width: 5%;
    33. left: 15%;
    34. float: left;
    35. background-color: yellow;
    36. }
    37. #div4{
    38. position: relative;
    39. min-height: 50px;
    40. background-color: green;
    41. float: right;
    42. width: 20%;
    43. }
    44. #div5{
    45. clear: both;
    46. position: relative;
    47. min-height: 70px;
    48. background-color: #808000;
    49. top: 20px;
    50. }
    51.  
    52. </style>
    53. <title>Test-Layout</title>
    54. </head>
    55. <body>
    56.   <div id="div1">div1</div>
    57.  
    58. <div id="div2">
    59. <div id="div3">div3</div>
    60. <div id="div4">div4</div>
    61. </div>
    62.  
    63. <div id="div5">div5</div>
    64. </body>
    65. </html>
    66.  
     
    Zuletzt bearbeitet: 26 Juli 2013
  7. kurzeFrage

    kurzeFrage Neues Mitglied

    Registriert seit:
    25 Juli 2013
    Beiträge:
    3
    Punkte für Erfolge:
    0
    Ja jetzt funktioniert es, vielen Dank!! Ich glaube, mein Fehler beim prüfen der Angaben, die ihr gemacht hat, war, dass ich height: auto gelassen habe und overflow: hidden nur hinzugefügt habe..
    wie auch immer, DANKE! :)
     
Status des Themas:
Es sind keine weiteren Antworten möglich.