Anzeige

Divs mit 100%höhe zum Elterncontainer

Divs mit 100%höhe zum Elterncontainer | PSD-Tutorials.de

Erstellt von danielx11, 26.08.2008.

  1. danielx11

    danielx11 Nicht mehr ganz neu hier

    Dabei seit:
    08.04.2008
    Beiträge:
    217
    Geschlecht:
    männlich
    Divs mit 100%höhe zum Elterncontainer
    Hi Folks,

    habe folgendes vor:

    einen Div in dem 2 weitere Divs nebeneinander positioniert sind.
    der Elterncontainer sowie body und html haben height:100%

    wie schaffe ich es, dass die 2 Divs in dem Elterncontainer eine 100% höhe haben, und somit der hintergrund dieser "Spalten" die gesamte Höhe des Elterncontainers füllt? diese sollen auch nicht darüber hinauslaufen.

    Ich hoffe Ihr wisst was ich meine :)

    Vielen Dank für Eure Hilfe.
     
    #1      
  2. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Divs mit 100%höhe zum Elterncontainer
    AW: Divs mit 100%höhe zum Elterncontainer

    Ähm, das hast du doch!?

    Ich hab mit deiner Styledefinition (lediglich die Farben geändert) das so mit dem IE 6 getestet:

    HTML:
    1. <title>Test</title>
    2.  
    3. <style type="text/css">
    4. <!--
    5. html {
    6. height:100%;
    7. }
    8.  
    9. body {
    10. height:100%;
    11. }
    12. #main {
    13. margin-left:auto;
    14. margin-right:auto;
    15. width:740px;
    16. font-family:Verdana, Arial, Helvetica, sans-serif;
    17. font-size:12px;
    18. line-height:18px;
    19. border:#0000ff 1px solid;
    20. height:100%
    21. }
    22. #main ul {
    23. margin-left:9px;
    24. padding-left:9px;
    25. }
    26. #box1 {
    27. width:200px;
    28. float:left;
    29. background-color:#00ff00;
    30. padding:10px;
    31. height:100%;
    32. position:relative;
    33. }
    34. #box2 {
    35. width:500px;
    36. float:right;
    37. background-color:#ff0000;
    38. padding:10px;
    39. background-image:url(logo.gif);
    40. background-position:top right;
    41. background-repeat:no-repeat;
    42. height:100%;
    43. }
    44.  
    45. -->
    46.  
    47. </head>
    48. <div id="main">
    49. <div id="box1">Box 1</div>
    50. <div id="box2">Box 2</div>
    51. </div>
    52. </body>
    53. </html>
     
    #2      
  3. danielx11

    danielx11 Nicht mehr ganz neu hier

    Dabei seit:
    08.04.2008
    Beiträge:
    217
    Geschlecht:
    männlich
    Divs mit 100%höhe zum Elterncontainer
    AW: Divs mit 100%höhe zum Elterncontainer

    Hi,

    soweit schon, aber nicht korrekt.
    Der Linke Teil läuft über den Elterncontainer hinaus.

    hier noch mal der HTML-Code:
    Wie kann ich erreichen, dass die Höhe des Eltercontainers sich dem Inhalt anpasst?
     
    #3      
  4. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    Divs mit 100%höhe zum Elterncontainer
    AW: Divs mit 100%höhe zum Elterncontainer

    gar nicht ;) du gibst ja 100% als Höhe für den Elerncontainer... dem Kindercontainer gibst du allerdings 100% + 80px margin...


    möglichkeite wäre:
    edit: funzt nicht



    oder den Boxen nicht margin top zuordenen, sondern padding top oder


    gar nüscht und dann einen span mit line-height:80px einzubauen

    edit: funzt irgendwie auch nicht sorry...
     
    Zuletzt bearbeitet: 26.08.2008
    #4      
  5. danielx11

    danielx11 Nicht mehr ganz neu hier

    Dabei seit:
    08.04.2008
    Beiträge:
    217
    Geschlecht:
    männlich
    Divs mit 100%höhe zum Elterncontainer
    AW: Divs mit 100%höhe zum Elterncontainer

    hmm, wollte es gerade testen :)
     
    #5      
  6. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Divs mit 100%höhe zum Elterncontainer
    AW: Divs mit 100%höhe zum Elterncontainer

    IE 6 zeigt das ganze ordnungsgemäß an und ich kann euren Fehler gar nicht nachvollziehen...

    Nachdem ich aber so schlau war und das ganze in FF 2 getestet habe weiß ich wovon ihr überhaupt redet...


    Opera 9 zeigt es aber auch richtig (sogar noch richtiger als der IE, nämlich das Leerzeichen an der richtigen Stelle) an...
     
    #6      
  7. danielx11

    danielx11 Nicht mehr ganz neu hier

    Dabei seit:
    08.04.2008
    Beiträge:
    217
    Geschlecht:
    männlich
    Divs mit 100%höhe zum Elterncontainer
    AW: Divs mit 100%höhe zum Elterncontainer

    Weiß denn jeder was gemeint ist oder fehlen Euch noch Infos?
    Vielleicht baut man die Sache auch ganz anders auf?
     
    #7      
  8. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Divs mit 100%höhe zum Elterncontainer
    AW: Divs mit 100%höhe zum Elterncontainer

    So, nach mehrerem Herumprobieren habe ich eine Lösung für dich:
    Es funktioniert nichts anderes (meiner Meinung nach habe ich alles ausprobiert was auch nur denkbar ist)

    1. Entferne die Höhenangabe für das main-div komplett
    2. Füge vor dem </div>-Tag vom main-div ein leeres div mit der clear:both; Angabe ein
    HTML:
    1. <title>Test</title>
    2.  
    3. <style type="text/css">
    4. <!--
    5. html {
    6. height:100%;
    7. }
    8.  
    9. body {
    10. height:100%;
    11. }
    12. #main {
    13. margin-left:auto;
    14. margin-right:auto;
    15. width:740px;
    16. font-family:Verdana, Arial, Helvetica, sans-serif;
    17. font-size:12px;
    18. line-height:18px;
    19. border:#0000ff 1px solid;
    20. }
    21. #main ul {
    22. margin-left:9px;
    23. padding-left:9px;
    24. }
    25. #box1 {
    26. width:200px;
    27. float:left;
    28. background-color:#00ff00;
    29. padding:10px;
    30. height:100%;
    31. position:relative;
    32. }
    33. #box2 {
    34. width:500px;
    35. float:right;
    36. background-color:#ff0000;
    37. padding:10px;
    38. background-image:url(logo.gif);
    39. background-position:top right;
    40. background-repeat:no-repeat;
    41. height:100%;
    42. }
    43.  
    44. -->
    45.  
    46. </head>
    47. <div id="main">
    48. <!-- SPALTE 1 -->
    49. <div id="box1">
    50. <div style="margin-top:80px;">
    51. CONTENT BOX 1
    52. </div>
    53. </div>
    54. <!-- SPALTE 2 -->
    55. <div id="box2">
    56. <div style="margin-top:80px;">
    57. CONTENT BOX 2
    58. </div>
    59. </div>
    60. <div style="clear:both;"></div>
    61. </div>
    62. </body>
    63. </html>
     
    #8      
  9. danielx11

    danielx11 Nicht mehr ganz neu hier

    Dabei seit:
    08.04.2008
    Beiträge:
    217
    Geschlecht:
    männlich
    Divs mit 100%höhe zum Elterncontainer
    AW: Divs mit 100%höhe zum Elterncontainer

    Super, ich danke Dir für Deine Mühe und werde es bei Gelegenheit mal ausprobieren.
     
    #9      
x
×
×