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 :D

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 :D
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 :wink: (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 :lol:

Dann noch ne min-height + IE6 fix und alles ist gut. Danke Euch :D