1. Lieber Benutzer,

    Du musst bei uns registriert sein, um an den Diskussionen teilzunehmen. Melde dich jetzt an - kostenfrei und unverbindlich. Und stelle Deine eigenen Fragen oder gib uns hilfreiche Antworten

Content füllen mit Höhe zwischen Footer & Header + 3 Spalten

Dieses Thema im Forum "CSS" wurde erstellt von bossac, 23 Februar 2011.

  1. bossac

    bossac Neues Mitglied

    Registriert seit:
    23 Februar 2011
    Beiträge:
    2
    Punkte für Erfolge:
    0
    Hallo Zusammen

    Ich möchte zwischen dem Header & fixiertem Footer ein Content-Div haben, dass 100% der Lücke dazwischen aufüllt (unabhängig von der Bildschirmauflösung). Habe nun eine Lösung dafür gefunden und diese funktioniert wunderbar. Hier der Link dazu: Link | stackoverflow.com

    Nun möchte ich aber nicht nur ein Div zwischen Header & Footer sondern die berühmten 3 Spalten. Wenn ich die nun im Content-Div einfüge, verhalten diese sich nicht (erwartungsgemäss) wie der Content und passen sich nicht der Höhe an. Kann mir jemand sagen, wie ich das lösen kann? Vielen Dank für Eure Hilfe!!!

    Screenshot wie es aussieht:
    [​IMG]

    So sollte es aussehen (Photoshop):
    [​IMG]

    Hier noch mein HTML-Code: (Wird ein bisschen länger... sry :D)

    HTML:
    1. <div id="divContent">
    2. <div id="divHeader">Header</div>
    3. <div id="divTabs">Tabs</div>
    4. <!-- Start 3 Column-->
    5. <div class="container threecol">
    6.     <div class="colmid">
    7.         <div class="colleft">
    8.             <div class="col1">
    9.                 Column 1
    10.                 <br /><br /><br />
    11.             </div>
    12.             <div class="col2">
    13.                 Column 2
    14.             </div>
    15.             <div class="col3">
    16.                 Column3
    17.             </div>
    18.         </div>
    19.     </div>
    20. </div>
    21. <!--End 3 Column-->
    22. <div id="divPush"></div>
    23. </div>
    24. <div id="divFooter">Footer</div>
    25.  
    26. </body>


    Und hier der CSS Code:

    Code (text):
    1. html, body
    2. {
    3.     height: 100%;
    4. }
    5.  
    6. body
    7. {
    8.     margin:0;
    9.     padding:0;
    10.     border:0;         /*entfernt Rand in alten IE-Versionen*/
    11.     width:100%;
    12.     min-width:1280px; /*Mindestbreite des Layouts
    13.                       /*min-...-Attribute funktionieren nicht in alten IE-Versionen*/
    14. }
    15.  
    16. #divHeader
    17. {
    18.     clear:both;
    19.     height: 70px;
    20.     float:left;
    21.     width:100%;
    22.    
    23.     /*temp*/ background-color: Red;
    24. }
    25.  
    26. #divTabs
    27. {
    28.     clear:both;
    29.     height:40px;
    30.     float:left;
    31.     width:100%;
    32.    
    33.     /*temp*/ background-color:Orange;
    34. }
    35.  
    36.  
    37. #divContent
    38. {
    39.     min-height: 100%;
    40.     height: auto !important; /*IE6 unterstützung*/
    41.     height: 100%;
    42.     margin: 0 auto -30px; /*muss gleich wie Footer/Push-Höhe sein*/
    43.     vertical-align: bottom;
    44.    
    45.     /*temp*/ background-color: Blue;
    46. }
    47.  
    48. #divFooter, #divPush
    49. {
    50.     height: 30px; /* Höhe von divFooter & divPush muss gleich sein*/
    51. }
    52.  
    53. #divFooter
    54. {
    55.     position: fixed;
    56.     width: 100%;
    57.     left: 0;
    58.     bottom:0px;
    59.    
    60.     /*temp*/ background-color:Green;
    61. }
    62.  
    63.  
    64. /***************************************************/
    65. /*********************3-Columns*********************/
    66. /***************************************************/
    67.  
    68. /* column container */
    69. .container {
    70.     position:relative;  /* Behebt IE7 overflow:hidden bug */
    71.     clear:both;
    72.     float:left;
    73.     width:100%;         /* Breite der Seite */
    74.     overflow:hidden;    /* Verhindet übehängende Divs */
    75. }
    76.  
    77. /* column settings */
    78. .colright,.colmid,.colleft
    79. {
    80.     float:left;
    81.     width:100%;         /* Breite der Seite */
    82.     position:relative;
    83. }
    84.  
    85. .col1,.col2,.col3
    86. {
    87.     float:left;
    88.     position:relative;
    89.     padding:0 0 1em 0;  /* Aussenabstände Spaltencontainer*/
    90.     overflow:hidden;
    91. }
    92.  
    93. /* 3 Column settings */
    94. .threecol
    95. {
    96.     background:yellow;  /* rechte Seite Hintergrund*/
    97. }
    98. .threecol .colmid
    99. {
    100.     right:25%;          /* Breite Rechte Spalte */
    101.     background:green;   /* Mittlere Spalte Hintergrund */
    102. }
    103. .threecol .colleft
    104. {
    105.     right:50%;          /* Breite Mittlere Spalte */
    106.     background:yellow;  /* Linke Spalte Hintergrund */
    107. }
    108. .threecol .col1
    109. {
    110.     width:46%;          /* Breite Inhalt Mitte (Spaltenbreite minus padding beider Seiten) */
    111.     left:102%;          /* 100% plus padding links der Spalte Mitte */
    112. }
    113. .threecol .col2
    114. {
    115.     width:21%;          /* Breite Inhalt Links(Spaltenbreite minus padding beider Seiten) */
    116.     left:31%;           /* Breite (Rechte Spalte) plus (Inhalt Mitte padding links & rechts) plus (Spalte links padding links) */
    117. }
    118. .threecol .col3
    119. {
    120.     width:21%;          /* Breite Inhalt Rechts (Spaltenbreite minus padding beider Seiten) */
    121.     left:85%;           /* Beachte -> (100% - Breite Linke Spalte) plus (Spalte Mitte padding links & rechts) plus (linke Spalte padding links & rechts) plus (Spalte rechts padding links) */
    122. }
     
    Zuletzt bearbeitet: 23 Februar 2011
    Werbung: Jetzt registrieren, damit diese Werbung verschwindet
  2. threadi

    threadi Moderator

    Registriert seit:
    20 Oktober 2006
    Beiträge:
    14.097
    Punkte für Erfolge:
    63
  3. bossac

    bossac Neues Mitglied

    Registriert seit:
    23 Februar 2011
    Beiträge:
    2
    Punkte für Erfolge:
    0
    Danke dir!
     

Diese Seite empfehlen