Div Höhe automatisch anpassen (100%)

irontom100 · 07.06.2010

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link  href="css/template.css" type="text/css" rel="stylesheet" />

</head>

<body>
<div id="site">
    <div id="top-login">Login</div>
    <div id="header">Header</div>
    <div id="content">
      <div id="left">left</div>
      <div id="right">right</div>
      <div id="main">
        [COLOR=Red]div soll eine höhe 100% haben also immer Automatisch an browser höhe angepast werden<br />
        das soll dann auch für die anderen divs gelten ich schffe es immder nur vür einen Div<br />
        ich danke euch für eure hilfe !!!!!!!!!!!!!!![/COLOR]

      </div>

    </div>
</div>
</body>
</html>

css

Code:

html
{
  height: 100%;
}
body
{
  background: url(../images/background.png);
  background-position: top center;
  margin: 0px;
}


#site
{
  background: url(../images/rahmen.png);
  background-position: top center;
  width: 1030px;
  height: 100%;
  margin: 0px auto;
}

#top-login
{
  background-color: #000099;
  height: 40px;
  width: 980px;
  margin: 0px auto;
}
#header
{
  background: #660099;
  height: 193px;
  margin: 0px auto;
  width: 980px;
}

#content
{
  background: #FFFF00;
  margin: 0px auto;
  width: 980px;
}

#left
{
  background: #FF0000;
  width: 160px;
  float: left;
}
#right
{
  background: #FF0000;
  width: 160px;
  float: right;
}
#main
{
  background: #888888;
  padding-left: 5px;
  padding-right: 5px;
  margin: 0px 160px 0px 160px;
}

aliasltb · 07.06.2010

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.

hubspe · 07.06.2010

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.

cebito · 07.06.2010

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.

irontom100 · 07.06.2010

AW: Div Höhe automatisch anpassen (100%)

danke für eure antworten
werde ich gleich mal probieren und dann berichten

Wlad1989 · 08.06.2010

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="site">
    <div id="content">
      <div id="left">
          <div style="margin-top:233px;">left</div>
      </div>
      <div id="main">
        <div style="margin-top:233px;"><p>div soll eine höhe 100% haben also immer Automatisch an browser höhe angepast werden<br />
        das soll dann auch für die anderen divs gelten ich schffe es immder nur vür einen Divdh<br />
        ich danke euch für ehjkhjure hilfe !!!!!!!!!!! f
</p>
          <p>&nbsp; </p>
        </div>
      </div>
      <div id="right"><div style="margin-top:233px;">right</div></div>
      <div style="clear:both"></div>

    </div>
    <div style="position:absolute;top:0;width:980px;">
      <div id="top-login">Login</div>
      <div id="header">Header</div>
    </div>
</div>
</body>
</html>

CSS :

Code:

html
{
    height:100%;
}
body
{
  background: url(../images/background.png);
  background-position: top center;
  margin: 0px;
    height:100%;
}


#site
{
  background: url(../images/rahmen.png);
  background-position: top center;
  width: 980px;
  height: 100%;
  margin: 0px auto;
}

#top-login
{
  background-color: #000099;
  height: 40px;
  width: 980px;
  margin: 0px auto;
}
#header
{
  background: #660099;
  height: 193px;
  margin: 0px auto;
  width: 980px;
}

#content
{
  background: #FFFF00;
  margin: 0px auto;
  width: 980px;
    min-height:100%;
}

#left
{
  background: #FF0000;
  width: 160px;
  float: left;
}
#right
{
  background: #FF0000;
  width: 160px;
  float: left;
}
#main
{
  background: #888888;
  padding-left: 5px;
  padding-right: 5px;
    float:left;
    width:650px
}

Habs auf die schnelle getippt, ist nicht grad sauber. Wenn du es verwenden solltest , rate ich es vorher etwas eleganter umzuschreiben.

MfG Wlad