height in % wird ignoriert

Seite 1 von 2 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/height_in_wird_ignoriert_113666/page_1 - zur Vollversion wechseln!

taz schrieb am 03.05.2004 um 16:07

folgendes problem: ich hab ne site mit einem container DIV, welches height:95% haben soll, u somit fast das gesamte Browserfenster zu verwenden auch wennn auf einer seite nur sehr wenig content ist. diese height angabe funktioniert im ie5 aber ie6 und firefox 0.8 machen das div immer nur genauso groß wie den content. mit min-height und einer angabe in px ist firefox zu überreden eine mindest-größe zu machen, der ie6 ignoriert das. wie kann ich dem ie6 beibringen ein div immer 95% vom body element zu haben egal wieviel content drin ist ?

weiters noch ein problem wieder mit einer horizontalen navigation

unter http://cleanup.gallien.org ist derzeit eine test-seite von mir mit horizontaler listen navigation (die im ie5 geht!)
NUR der dunkelblaue balken am fuße der navigation rutscht im ie5 trotz margin:0; immer 20 px ca. nach unten und erzeugt ein unschönes loch. ie6, firefox 0.8 und safari stellen das richtig dar. unter bestimmten umständen zb wenn man auf technik klickt wird der blaue balken auch im ie richtig dargestellt, da das bild ihn quasi dorthin "presst" -> ist aber auch keine lösung

Rektal schrieb am 03.05.2004 um 19:20

Das Problem ist (und warum min-height funktioniert, gilt noch zu eruieren): laut der Spezifikation ist eine Prozentangabe bei height/width immer abhaengig, wieviel der Parent-Container (im einfachsten fall sagen wir <body> zur Verfuegung stellt. Der ist default aber nicht auf 100% sondern eben nur so gross, damit der Content rein paszt!

Durch den Code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

gibt du an, der Browser soll sich so strikt an den Standard halten wie moeglich. Wenn du das rausschmeisst, sind die Chancen gut, dass es im IE6 und Fireforx wieder geht. Aber im Prinzip ist das not the way to do it.

Weiterfuehrende Literatur: http://www.quirksmode.org/css/100percheight.html

atrox schrieb am 03.05.2004 um 19:31

ohne doctype gehts jedenfalls auch im IE6. (dann ist er im s.g. "Quirks"-Mode)

atrox schrieb am 03.05.2004 um 19:33

ahh.. so gehts trotz xhtml-transitional doctype auch im IE6:

Code:

body
	{
		height:95%;
	}

taz schrieb am 03.05.2004 um 19:41

thx also für die blöden (also mich) zum nochmal durchdenken

wenn ich dem body explizit height zb 98% od 100% gebe dann kann das tochterelement in meinem fall das container-div mit height 95% erstrecken wie gewünscht ohne quirks ?

edit: wegen des menü bugs ein screenshot. die blue leiste (border des div content) soll direkt an das menü unten anschließen. das funktioniert im ie6 und mozilla aber eben nicht immer im ie5

Rektal schrieb am 03.05.2004 um 20:25

Zitat von taz
Zitat von volker
haben wir gemerkt, ich konnt eure musik schon nimma hören *gg*

Jup, exakto. Mac MSIE-Browser haben damit aber leider auch Probleme.

taz schrieb am 03.05.2004 um 20:32

habs auf quirksmode.org gelesen

meine wahl ist daher quirksmode und kein safari oder body und html ne height geben und alles ausser ie5:mac

ich denke safari gehört die zukunft so lets do it ohne quirks

Rektal schrieb am 03.05.2004 um 20:58

Nod, Fullack.

taz schrieb am 05.05.2004 um 09:29

so eine frage hab ich noch

wenn ich nur dem body eine height gebe gehts im ie6 aber nicht im mozilla, gebe ich dem html element auch eine height wird mein container-div vergrößert bis auf die angegebene height (also hier 95%(div) von 98%(html))
damit wird der div korrekt vergrößert. falls ich jedoch mehr inhalt habe als man auf einmal am bildschirm sieht, dann vergrößert der ie das div ganz eifnach und alles geht sich aus. bei mozilla geht alles aus dem div raus, was zu viel ist.

das kann auch nicht sinn der sache sein. wie kann am nd em mozilla nun noch sagen, dass er ebenfalls bei bedarf das div vergrößern soll ?

Rektal schrieb am 05.05.2004 um 10:00

Mhmm ... ich glaub, IE ist falsch und Mozilla richtig

Versuch mal, als Test, fuer Mozilla min-height: <deineprozentangabe>; anstatt height, wenn das funktioniert, dann machts der IE falsch (aber gut fuer dich) und du weisst, wie dus fuern Mozilla beheben kannst.

taz schrieb am 05.05.2004 um 10:18

das ie falsch und mozilla richtig ist,davon ist wirklich leider meist auszugehen

ABER

ich hab für den container height:95% und min-height:95% vergeben -> gleicher effekt. (hab auch probiert dem html element ne min-height zu geben -> auch nix

am besten zu sehen bei http://cleanup.gallien.org/technik.html und das browser fenster einfach etwas kleiner machen damit der content größer wird als die anzeigefläche

Rektal schrieb am 05.05.2004 um 10:29

Moment, "height:95% und min-height:95%"? Hab ich nicht geschrieben anstatt ? Das heisst, fuer Mozilla-Test -> height raus, nur min-height rein!

taz schrieb am 05.05.2004 um 10:31

argl sorry lesen sollt man können

wie immer 100 Punkte für Rektal alles paletti

gibts zu dem thema auch wo was zu lesen oder wie kommt man auf diese lösung

btw ich hoffe auf ein baldiges Forum-User-Treffen durch deine Tipps schulde ich dir mindestens einen Vollrausch

Rektal schrieb am 05.05.2004 um 10:36

"wie kommt man auf diese lösung" a) specs auswendig lesen (na scherz, aber ich habs mindestens zweimal gelesen) b) praxis.

Wenn du dem IE einem block element sagst "height: 100px" und der content geht darueber hinaus wird das element groesser -> fehler. Mozilla machts richtig. Fuer den gewuenschten Effekt gibt es min-height, das kann der IE aber nicht.

Man muss also hier dann min-height fuer Gecko-Browser und height nur fuer IE angeben. Wenn du mehrere Styles einbindest, wuerde ich IE Conditional Comments empfehlen. Wenn dir das zu bloed ist, wuerde ich CSS-expressions empfehlen. Die kann nur IE:

#container {
height: expression("95%");
min-height: 95%;
}

Alle Browser ignorieren die erste Angabe, weils nur IE kann. Fuer alle non-IE Browser reicht die zweite Angabe (sollte man halt auch noch testen wie es am Mac IE ist, aber afaik ist der sehr Buggy in die Richtung)

taz schrieb am 05.05.2004 um 10:39

die derzeitge lösung geht sehr gut weil die height angabe für den body ist und min-height für html

ie nimmt body , mozilla nimmt html (laut quirksmode.org) und ich bin glücklich