Page 1 of 1
div height:100%
Posted: Wed 27. Aug 2008, 07:12
by mother-brain
Guten Morgen.
Irgendwie will es nicht so wie es soll.
3 DIV´s, der mittlere enthält Content, die beiden äusseren repeaten einen Grafikschnippsel. Alle 3 DIV´s sitzen in einem 4ten DIV drin. Setze ich für den DIV mit Content height:auto, passt er sich an den Content an wie gewünscht. Damit die beiden danebenliegenden DIV´s die Selbe grösse haben, muss ich für den äusseren DIV height:100% definieren. Tue ich das nicht, sind die beiden danebenliegenden DIV´s nicht sichtbar, ob ich für sie height:100% oder height:auto definiere.
Und das Problem? Die DIV´s sind zu lang mit 100%. Mit ganz wenig Text, bleibt unten sehr viel Freiraum. Mit viel Text bleiben unten immer noch gute 5cm Freiraum. Nur der DIV mit Content stimmt, dank height:auto. Ich komme nicht drauf ...
Weiss jemand Rat?
Gruss,
mb
Re: div height:100%
Posted: Wed 27. Aug 2008, 08:40
by Oliver Georgi
height 100% schlägt in aller Regel fehl. Liegt schon mal an 100% - passt selten perfekt (eigentlich nie).
As meiner Erfahrung kann man das nur Faken (Hintergrundgrafik) oder mit vielen Tricks (negative Margin/Padding/Border) oder ganz simpel per JavaScript lösen.
Ich würde immer JavaScript nehmen - Höhe von dem DIV abnehmen, dass die Höhe vorgibt und auf die anderen beiden übertragen. Bibliotheken wie Mootools bieten Dir hier interessante Werkzeuge.
http://docs.mootools.net/Element/Element.Dimensions
Oliver
Re: div height:100%
Posted: Wed 27. Aug 2008, 09:34
by mother-brain
Javascript fällt weg, das hat, kann und will nicht jeder.
Was ich aber nicht verstehe, woher nimmt der Browser die 100%? Die sind nicht Bildschirmfüllend und grösser als der Text.
Es muss doch einen Weg geben, dass die beiden danebenliegenden DIV´s die Grösse des Mittleren übernehmen ...
Re: div height:100%
Posted: Wed 27. Aug 2008, 09:46
by flip-flop
JS würde ich auch nicht verwenden, da es problemlos auch ohne geht.
Löse dich von diesen 100% das wird selten funktionieren.
Schau dir die Technik dieser zwei Layouts an: (Funktionieren in allen Browsern)
-
http://www.brunildo.org/test/threecols.html
-
http://www.brunildo.org/test/lrfc.html
Dann klappt das auch mit: "Any column may be longest."
Knut
Re: div height:100%
Posted: Wed 27. Aug 2008, 10:42
by Jensensen
Re: div height:100%
Posted: Wed 27. Aug 2008, 12:13
by Oliver Georgi
Believe me - JavaScript will work for 95% of your users. So it is widely accepted. The rest has to live with it as it is (and often knows this). Don't think about that too much. JavaScript is a common thing. Most modern websites have limited functionality without JavaScript. And as long CSS has that many problems there is no easier way.
See the main navigation here:
http://www.bauhaus-dessau.de/index.php?de
Nothing speaks against JavaScript just to style something.
Oliver
Re: div height:100%
Posted: Wed 27. Aug 2008, 14:46
by Toflar
Aber 100%-Dinge gehen eigentlich immer mit CSS, auch wenn es manchmau "Faux columns" braucht

Re: div height:100%
Posted: Wed 27. Aug 2008, 17:30
by Oliver Georgi
Toflar wrote:Aber 100%-Dinge gehen eigentlich immer mit CSS, auch wenn es manchmau "Faux columns" braucht

Aber zumeist nicht so, wie erwartet.
Oliver
Re: div height:100%
Posted: Thu 28. Aug 2008, 00:00
by mother-brain
Also die c´t verbannt Javascript z.b. bei
http://www.heise.de/ct/projekte/ctbankix/ aus gutem Grund. Meine eigene Erfahrung sagt, selten aktiviere ich Javascript weil ich es brauche, meistens deaktiviere ich es wegen nervender LayerWerbung etc
Danke für die Links werd ich mir erstmal zu Gemüte ziehen.
Re: div height:100%
Posted: Thu 28. Aug 2008, 00:17
by Jensensen
ist ambivalent!
bei heise/ct/ laufen sogar reichlich java scripte, von ads, über clip-clap-login, bis hin zu IVW

(stats)
aber in diesem thread wurden beinahe sämtliche lösungsmöglichkeiten angeführt/angesprochen/aufgezeigt.
Re: div height:100%
Posted: Thu 28. Aug 2008, 01:53
by mother-brain
Hab das Bankix auch nur von wegen JS und Sicherheit angeführt, den meisten Mist fängt man sich deswegen ein, online
So. Hab es jetzt so gelöst, dass ich keine height: Angaben mehr mache, die Browser verlängern ja automatisch, sofern man clear:both mit einbaut. Muss man erstmal merken
Dann noch ne min-height + IE6 fix und alles ist gut. Danke Euch
