PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : hi, CSS Layout mit 100% Höhe?


ca | Blade-IV
2005-03-18, 15:25:34
hu,

ich wollte ein CSS Layout entwerfen, das sich Dynamisch der Seite in der Höhe anpasst, jedoch der "#kopf" und "#inhalt_kopf" müssen feste werte haben, da dort 2 Bilder liegen.

Das Problem ist das sich die 100% ´korrekt auswirken jedoch immer die 2 px werte hinzugerechnet werden.

Also: bei 800*600, 100% also 600px + "#kopf" 114px + "#inhalt_kopf" 19px...

ich werd noch wahnsinnig...

unten mal so wie ich es im momentan habe...

#box {
width:800px;
height: 100%;
margin: 0px;
padding: 0px;
text-align:left;
border: 1px;
color:#666666;
}

#inhalt {
width:600px;
height: 100%;
padding:10px;
margin: 0px;
float:left;
background-color:#FFF;
overflow: auto;
}

#inhalt_kopf {
width:600px;
height: 19px;
padding:0px;
margin: 0px;
float:left;
background-color:FFF;
background-image: url(../../icons/back.png);
background-repeat:no-repeat;
overflow: hidden;
}

#kopf {
background-color:transparent;
width:750px;
height:114px;
margin:0px;
padding:0px;
background-image: url(../../icons/top.png);
overflow: hidden;
}

#links {
width:200px;
height: 100%;
padding:20px;
margin: 0px;
float:left;
background-color:#EFEFEF;
}

mfg,Alex.R.

ca | Blade-IV
2005-03-19, 22:38:27
Knann mir den keiner helfen ? Währe echt wichtig... habs immer noch nicht hinbekommen...


Danke.

mfg,Alex.R.

PuppetMaster
2005-03-21, 22:17:19
Wie sieht das Markup dazu aus? Doctype/Standards-Mode oder nicht?

Gast00
2005-03-22, 16:16:13
Hi,

ohne dein Beispiel jetzt näher zu untersuchen: hast du den Body auf 100% Höhe gestellt?

Z.b.
body {height: 100%;}

DR.DEATH
2005-03-22, 19:56:56
Wirst du wohl keine Chance haben. In HTML 4.01 Strict hab ichs bis jetzt, mit allen moeglichen Tricks, noch nicht Fehlerfrei geschafft.

PuppetMaster
2005-03-22, 22:48:38
Wirst du wohl keine Chance haben. In HTML 4.01 Strict hab ichs bis jetzt, mit allen moeglichen Tricks, noch nicht Fehlerfrei geschafft.
Probiers mal mit

html {
height: 100%;
}
body {
height: 100%;
margin:0px;
padding:0px;
}