<div> 100% auch im Firefox und Co.

cssler · #1 (**permalink**) 04.01.2006, 16:48

Hallo!

Folgender Code wird vom IE so dargestellt wie ich es möchte. Die Browser weigern sich allerdings:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    
    <style media="screen" type="text/css">
        html, body { height: 100%; }
        body
        {
            height: 100%;
            background-color: gray;
            margin: 0;
            padding: 5%;
            text-align: center;
        }
        
        #main
        {
            min-height: 50%;
            height: 50%;
            background-color: white;
        }
        
        html>body #main { height: auto; }
        
        #content
        {
            height: 100%;
            min-height: 100%;
            background-color: fuchsia;
        }
    </style>
</head>

<body>

    <div id="main">
        <div id="content">
            Content Content Content Content Content Content Content Content Content Content Content Content
                    </div>
    </div>

</body>
</html>

Also "#content" soll genauso so groß (hoch) sein wie "#main".
Wenn ich jetzt folgenden CSS Code entfernen

Zitat:

html>body #main { height: auto; }

Zeigen die Browser es richtig an solange der Textinhalt von "#content" nicht größer ist als die Höhe von "#main".
Andernfalls schmieren sie die Schrift erbarmunglos über die Grenzen von "#main" und "#content". Das ist ja auch nachvollziehbar aber ich möchte es halt anders. Kann mir jemand hier wohl weiterlhelfen die "#content" Ebene auf die Höhe von "#main" zu bekommen OHNE das der Text über die beiden Ebenen geschmiert wird?

Gruß cssler

ulle · #2 (**permalink**) 04.01.2006, 17:34

http://www.xhtmlforum.de/viewtopic.p...ight=minheight

cssler · #3 (**permalink**) 04.01.2006, 18:53

Danke, aber das hilft mir nicht.

Wenn ich nun bei der "#content" Ebene für den Firefox nur noch min-height: 100% nutze, sitzt sie bei viel Text über der "#main" Ebene.

Es muss doch dafür eine Lösung geben.

Gruß <cssler />

fricca · #4 (**permalink**) 05.01.2006, 01:32

Auch #main darf keine height haben, wenn es mit dem Inhalt mitwachsen soll.

Unsk1ll3d · #5 (**permalink**) 05.01.2006, 03:35

Hoi, hatte das selbe Problem

Ich habe es einfach mit einem dummy-div gemacht, der als background-image ein hintergundbild beinhaltet, das sich vervielfältigt...

vielleicht hilft es dir ja:
Hier der Link zu der Ansicht
http://unsk1ll3d.de/homepage/index.p...=Projects&ID=1

und hier sind die Stylesheets:
http://unsk1ll3d.de/homepage/gfx/tem...y/css/navi.css
http://unsk1ll3d.de/homepage/gfx/tem...ss/sidebar.css

Der Vorteil ist, dass sich der dummy div dem Inhalt und der Länge anpasst.
Damit du weisst was ich damit meine ist hier auch noch der Link zu der Hintergrund Grafik meines Dummys...
http://unsk1ll3d.de/homepage/gfx/tem...ebar_dummy.jpg

Code:

<div id="dummy" style="background-image:url('gfx.jpg');">
 <div id="menu">blabla Link
Link usw...</div>
 <div id="content">
Content der Inhalt usw...</div>
<div>

Hoffe das hilft dir auf deinem "Weg zur Lösung"

Gr33tz,
Unsk1ll3d

E|H · #6 (**permalink**) 05.01.2006, 19:00

Wozu brauchst du denn #main und #content?
So wie das da oben aussieht, sitzen die direkt ineinander, so daß man eines weglassen kann.

Dummy-divs würde ich vermeiden.

cssler · #7 (**permalink**) 05.01.2006, 19:19

@Unsk1ll3d: Danke für die Hilfe aber ein Dummy <div> möchte ich nicht so gerne verwenden.

Zitat:

Zitat von fricca

Auch #main darf keine height haben, wenn es mit dem Inhalt mitwachsen soll.

Ja, dann ist es ja nicht 100% height sondern nur, bei wenig Text, eben so wie der Text.

Zitat:

Zitat von E|H

Wozu brauchst du denn #main und #content?
So wie das da oben aussieht, sitzen die direkt ineinander, so daß man eines weglassen kann.

"In echt"

ist ja auch nocht einen Navigation enthalten und die #content und #navi Ebene gehören imho der Konsequenz nach eingebettet.

Gruß cssler

Dieter · #8 (**permalink**) 05.01.2006, 22:09

Zitat:

Folgender Code wird vom IE so dargestellt wie ich es möchte. Die Browser weigern sich allerdings:

Diese Unterscheidung ist echt Spitze! Das wollte ich immer schon mal so formulieren!

fricca · #9 (**permalink**) 05.01.2006, 23:31

Zitat:

Zitat von cssler

"In echt"

ist ja auch nocht einen Navigation enthalten und die #content und #navi Ebene gehören imho der Konsequenz nach eingebettet.

Vielleicht zeigst du einfach mal, was du tatsächlich erreichen willst.
Ein Element, das eine bestimmte Mindesthöhe hat und darüber hinausgehend sich seinem Inhalt anpasst, bekommst du nur mit min-height. Zweimal min-height in % bei verschachtelten Elementen ist nicht möglich, weil %-min-height sich nach der height-Angabe des Elternelements richtet.
Wenn du die Illusion durchgehender Spalten willst, dann beschäftige dich mit "faux-columns".

cssler · #10 (**permalink**) 06.01.2006, 13:31

Zitat:

Zitat von fricca

Vielleicht zeigst du einfach mal, was du tatsächlich erreichen willst.
Ein Element, das eine bestimmte Mindesthöhe hat und darüber hinausgehend sich seinem Inhalt anpasst, bekommst du nur mit min-height. Zweimal min-height in % bei verschachtelten Elementen ist nicht möglich, weil %-min-height sich nach der height-Angabe des Elternelements richtet.
Wenn du die Illusion durchgehender Spalten willst, dann beschäftige dich mit "faux-columns".

Naja, das mit der Navi Ebene habe ich eigentlich nur auf die Frage hin von E|H ob ich beide Ebenen bräuchte.
Erreichen will ich das "#content" die gleiche Höhe wie die parent-Ebene "#main" hat und bei Bedarf sich "#main" der Länge von "#content" anpasst. Aus dem was ich bisher gelesen habe scheint es aber der Fall "faux-columns" zu sein, oder?

Gruß cssler

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Synchroner XMLHttpRequest und Firefox reagiert nicht mehr	kristian	Javascript & Ajax	3	05.08.2008 17:10
Firefox 1.5 Beta 1	Pablo	Offtopic	19	13.09.2005 19:56
Firefox - clear:both - <br/> oder <div>	ulle	Knowledge Base	30	02.06.2005 15:15
<p> tag in <div> zerstört layout in firefox :(	ichwaergern	CSS	2	29.11.2004 14:23
Bitte testen mit Firefox und IE (Vergleich!)	Spider	Site- und Layoutcheck	8	23.09.2004 23:38