height: css

eiskalt

Hi
wie kann ich mit height und prozentangaben die komplette höhe des browsers ausnutzen? irgendwie klappt das net

body{background-color: #000000;
 border: 0px solid #FFFFFF;
 weidth:100%;
 height:100%}

#oben{width: 100%;
      border: 0px solid #000000;
      background-color: #000000;
      background-image:url("../images/hintergrundlogo1.jpg");
      background-repeat:x-repeat;
      height: 10%;
}

#mitte{width:100%;
       height:80%;
       background-color:#76fe45;}

#unten{width:100%;
       height:10%;
       background-color:#987654;}

bin ich da jetzt zu doof
die divs werden nur dargestellt wenn ich da was rein mach leerzeilen z.b. und dann sind sie auch nur so groß wie die leerzeilen die ich reingemacht hab

MFG eiskalt

Reyx

height ist afair nicht für diese Art der Nutzung gedacht.

eiskalt

das is aber schlecht für mich wie krieg ichs dann hin?

[edit]
ohne feste werte für die höhe zu vergeben?
[/edit]

Reyx

Kommt drauf an, wofür brauchst du das denn?

Für eine Navigationsleiste könntest du z.B. den Weg über body::background nehmen und da dann background-repeat auf repeat-y stellen, nur als Beispiel. I.d.R. kannst du das umgehen.

eiskalt

ich will nur eine kleine leiste unten am bildschirm haben thats all. die von links nach rechts über den ganzen browser läuft

solche sachen sind im moment noch ein krampf mit non-table design und css, da koennen die befuerworter dieses prinzips sagen was sie wollen.
(in den anderen punkten, bis auf das div design das designen leichter macht haben sie aber recht).

du kannst mal versuchen mit height=100% auch html zuzuweisen, also html { hei...}

du wirst aber frueher oder spaeter probleme bekommen (z.b. wenn du noch float left/right in der seite brauchst).

alternativ kannst du auch die position des streifens vom unteren rand der seite angeben (attribut position je nachdem ob es mitscrollen soll). aber auch damit wirst du nicht in allen browsern dein resultat bekommen, ohne umstaendlich mit browserweichen oder anderen tricks rumzumurksen.

MORL

Also mit

#footer {
 width:100%;
 height:20px;
 position:absolute;
 bottom:0px;
}

wird bei mir ein Element am unteren Bildschirmrand angezeigt und das in 4 verschiedenen Browsern.