Anzeige

Div Höhe automatisch anpassen (100%)

Div Höhe automatisch anpassen (100%) | PSD-Tutorials.de

Erstellt von irontom100, 07.06.2010.

  1. irontom100

    irontom100 Nicht mehr ganz neu hier

    Dabei seit:
    01.11.2007
    Beiträge:
    57
    Geschlecht:
    männlich
    Div Höhe automatisch anpassen (100%)
    hallo leute
    ich habe da ein kleines problem mit der erstellung einer Webseite
    ich hoffe ihr könnt mir helfen
    ich möchte in meinen template einen bestimmten div dazu bringen in 100%
    höhe zu öffen er soll sich am browser fenster orientiren und wenn er mehr inhalt bekommt soll der div sich automatisch verlängeren
    ich hoffe ihr könnt mir helfen
    html
    Code (Text):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6. <title>Untitled Document</title>
    7.  
    8. <link  href="css/template.css" type="text/css" rel="stylesheet" />
    9.  
    10. </head>
    11.  
    12. <body>
    13. <div id="site">
    14.     <div id="top-login">Login</div>
    15.     <div id="header">Header</div>
    16.     <div id="content">
    17.       <div id="left">left</div>
    18.       <div id="right">right</div>
    19.       <div id="main">
    20.         [COLOR=Red]div soll eine höhe 100% haben also immer Automatisch an browser höhe angepast werden<br />
    21.         das soll dann auch für die anderen divs gelten ich schffe es immder nur vür einen Div<br />
    22.         ich danke euch für eure hilfe !!!!!!!!!!!!!!![/COLOR]
    23.  
    24.       </div>
    25.  
    26.     </div>
    27. </div>
    28. </body>
    29. </html>
    30.  
    css
    Code (Text):
    1.  
    2.  
    3. html
    4. {
    5.   height: 100%;
    6. }
    7. body
    8. {
    9.   background: url(../images/background.png);
    10.   background-position: top center;
    11.   margin: 0px;
    12. }
    13.  
    14.  
    15. #site
    16. {
    17.   background: url(../images/rahmen.png);
    18.   background-position: top center;
    19.   width: 1030px;
    20.   height: 100%;
    21.   margin: 0px auto;
    22. }
    23.  
    24. #top-login
    25. {
    26.   background-color: #000099;
    27.   height: 40px;
    28.   width: 980px;
    29.   margin: 0px auto;
    30. }
    31. #header
    32. {
    33.   background: #660099;
    34.   height: 193px;
    35.   margin: 0px auto;
    36.   width: 980px;
    37. }
    38.  
    39. #content
    40. {
    41.   background: #FFFF00;
    42.   margin: 0px auto;
    43.   width: 980px;
    44. }
    45.  
    46. #left
    47. {
    48.   background: #FF0000;
    49.   width: 160px;
    50.   float: left;
    51. }
    52. #right
    53. {
    54.   background: #FF0000;
    55.   width: 160px;
    56.   float: right;
    57. }
    58. #main
    59. {
    60.   background: #888888;
    61.   padding-left: 5px;
    62.   padding-right: 5px;
    63.   margin: 0px 160px 0px 160px;
    64. }
    65.  
    [​IMG]



     
    #1      
  2. aliasltb

    aliasltb LTB

    Dabei seit:
    23.03.2009
    Beiträge:
    189
    Geschlecht:
    männlich
    Software:
    Eclipse, Photoshop, Indesign, Illustrator, Flash, Flash Builder
    Kameratyp:
    HTC Desire HD
    Div Höhe automatisch anpassen (100%)
    AW: Div Höhe automatisch anpassen (100%)

    Ich bin mir gerade nicht sicher, aber kannst du nicht einfach height:auto angeben? Oder min-height:100%? Letzteres funktioniert allerdings nicht in älteren Browsern.

    Wenn du dann auch noch willst dass die Säulen links und rechts mitwachsen such mal bei Google & Co. nach Faux Columns.
     
    #2      
  3. hubspe

    hubspe display:schwarzgelb;

    Dabei seit:
    09.08.2007
    Beiträge:
    209
    Geschlecht:
    männlich
    Ort:
    Passau
    Software:
    PS CS5
    Kameratyp:
    Linhof Technika 4
    Div Höhe automatisch anpassen (100%)
    AW: Div Höhe automatisch anpassen (100%)

    100% heißt immer 100% von was.
    Hat das Vorfahre keine Höhe kann 100% nicht errechnet werden und sie fällt auf height:auto; (default) zurück, wird also nur so hoch wie der Inhalt.

    In deinem Falle brauchen alle Vorfahren inkl. body und html height:100%.

    Schau dir mal Foot Sticker Alt an, um das zu verstehen. ;)

    @aliasltb das betrifft den IE6. Der interpretiert aber zum Glück height fälschlicherweise wie min-height. Deshalb bekommt er einfach height per Cond. Comment.
     
    #3      
  4. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Div Höhe automatisch anpassen (100%)
    AW: Div Höhe automatisch anpassen (100%)

    height mit Prozentangaben braucht immer ein direktes Elternelement mit einer height, würde in deinem Fall heißen, wenn dein "main" 100% haben soll, müssen:

    • "html"als Elternelement für "body",
    • "body" als Elternelement für "site",
    • "site" als Elternelement für "content" und
    • "content als Elternelement für "main" height:100%; haben,
    was aber eigentlich wenig Sinn macht, da deine anderen Divs (login, header) ja auch noch Platz einnehmen, deine Seite wäre dann somit 100%+233px hoch.
    Wenn es dir nur um die Spalten geht, suche wie oben schon geschrieben nach "Faux-Columns". Du könntest aber auch ein Hintergrundbild (1px hoch) für den body machen, position:top center, repeat:y; oder auch für den "site"-div, wobei du dann wieder deine 100% Höhe brauchst...

    PS. wenn natürlich ein Element eine Pixelangabe als Höhe besitzt, müssen die Eltern keine Höhe haben und die Kindelemente würden bei 100% die Pixelhöhe des Elternelements annehmen.
     
    #4      
  5. irontom100

    irontom100 Nicht mehr ganz neu hier

    Dabei seit:
    01.11.2007
    Beiträge:
    57
    Geschlecht:
    männlich
    Div Höhe automatisch anpassen (100%)
    AW: Div Höhe automatisch anpassen (100%)

    danke für eure antworten
    werde ich gleich mal probieren und dann berichten
     
    #5      
  6. Wlad1989

    Wlad1989 Noch nicht viel geschrieben

    Dabei seit:
    21.09.2009
    Beiträge:
    9
    Geschlecht:
    männlich
    Software:
    adobe CS4 master collection
    Div Höhe automatisch anpassen (100%)
    AW: Div Höhe automatisch anpassen (100%)

    Hey, ich bin mir jetzt nicht sicher ob ich dich richtig verstanden habe, hoffe trotzdem das ich dir damit weiterhelfen kann. Hab den Code von dir so umgeschrieben das der DIV mit der ID "content" immer mindestens die Höhe des Browsers hat und sobald z.b. der DIV mit der ID "main" die Browserhöhe überschreibt, sich der DIV-Tag in der Höhe anpasst.

    HTML :
    Code (Text):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6. <title>Untitled Document</title>
    7. </head>
    8.  
    9. <body>
    10. <div id="site">
    11.     <div id="content">
    12.       <div id="left">
    13.           <div style="margin-top:233px;">left</div>
    14.       </div>
    15.       <div id="main">
    16.         <div style="margin-top:233px;"><p>div soll eine höhe 100% haben also immer Automatisch an browser höhe angepast werden<br />
    17.         das soll dann auch für die anderen divs gelten ich schffe es immder nur vür einen Divdh<br />
    18.         ich danke euch für ehjkhjure hilfe !!!!!!!!!!! f
    19. </p>
    20.           <p>&nbsp; </p>
    21.         </div>
    22.       </div>
    23.       <div id="right"><div style="margin-top:233px;">right</div></div>
    24.       <div style="clear:both"></div>
    25.  
    26.     </div>
    27.     <div style="position:absolute;top:0;width:980px;">
    28.       <div id="top-login">Login</div>
    29.       <div id="header">Header</div>
    30.     </div>
    31. </div>
    32. </body>
    33. </html>
    34.  
    CSS :
    Code (Text):
    1.  
    2. html
    3. {
    4.     height:100%;
    5. }
    6. body
    7. {
    8.   background: url(../images/background.png);
    9.   background-position: top center;
    10.   margin: 0px;
    11.     height:100%;
    12. }
    13.  
    14.  
    15. #site
    16. {
    17.   background: url(../images/rahmen.png);
    18.   background-position: top center;
    19.   width: 980px;
    20.   height: 100%;
    21.   margin: 0px auto;
    22. }
    23.  
    24. #top-login
    25. {
    26.   background-color: #000099;
    27.   height: 40px;
    28.   width: 980px;
    29.   margin: 0px auto;
    30. }
    31. #header
    32. {
    33.   background: #660099;
    34.   height: 193px;
    35.   margin: 0px auto;
    36.   width: 980px;
    37. }
    38.  
    39. #content
    40. {
    41.   background: #FFFF00;
    42.   margin: 0px auto;
    43.   width: 980px;
    44.     min-height:100%;
    45. }
    46.  
    47. #left
    48. {
    49.   background: #FF0000;
    50.   width: 160px;
    51.   float: left;
    52. }
    53. #right
    54. {
    55.   background: #FF0000;
    56.   width: 160px;
    57.   float: left;
    58. }
    59. #main
    60. {
    61.   background: #888888;
    62.   padding-left: 5px;
    63.   padding-right: 5px;
    64.     float:left;
    65.     width:650px
    66. }
    67.  
    Habs auf die schnelle getippt, ist nicht grad sauber. Wenn du es verwenden solltest , rate ich es vorher etwas eleganter umzuschreiben.

    MfG Wlad
     
    #6      
x
×
×