Problem mit Div in Div und 100% Höhe IE7

[Michael]

Hallo,

Ich bastle gerade an einer Seite und habe ein Problem im IE 7. Ich habe ein Layout aus 3 Bereichen Header, Menu, Content. Header und Menu sind in der Größe fix, der Content-Bereich passt sich immer der Fenstergröße an.

Soweit passt es, aber im Contentbereich wird nochmal ein Div plaziert und dieses soll die gesamte Höhe des anderen Div´s erhalten.

Hier der CSS-Code:

*html #maincontent{
position: fixed;
top: 200px; /*170*/ /*Set top value to HeightOfTopFrameDiv*/
left: 80px; /*Set left value to WidthOfLeftFrameDiv*/
right: 80px; /*Set right value to WidthOfRightFrameDiv*/
bottom: 10px;
overflow: auto;
/* background-color: #6d913a;*/
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
color: Black;
text-align: center;
background-image: url(schatten.jpg);
background-attachment: scroll;
background-repeat: no-repeat;
background-position: bottom right;
width: 100%;
height: 100%;
}

*html #maincontent_inner{
position: fixed;
margin: 0px 16px 0px 0px;
top: 200px; /*170*/
left: 80px; /*Set left value to WidthOfLeftFrameDiv*/
right: 110px; /*Set right value to WidthOfRightFrameDiv*/
bottom: 26px;
overflow: auto;
background-color: #6d913a;
}

Das *html #maincontent_inner ist immer nur so hoch wie sein Inhalt. Setze ich height: 100%; wird es aber zu groß.

Hat das jemand eine Lösung für mich? Hier sieht man den Entwurf: http://kneissl.biz/entwurf/ - Der Bereich wo "Test" steht sollte eigentlich bis zum Bildschirmende gehen.

Danke,
Michael

[MichiN]

Hi Michael,

im Contentbereich wird nochmal ein Div plaziert und dieses soll die gesamte Höhe des anderen Div´s erhalten.

hast Du schon versucht, in der CSS-Datei statt dem

#maincontent_inner  
{  
position: fixed;  
top:200px; /*170*/ /*Set top value to HeightOfTopFrameDiv*/  
left:80px; /*Set left value to WidthOfLeftFrameDiv*/  
right:96px; /*Set right value to WidthOfRightFrameDiv*/  
bottom:26px;  
overflow:auto;  
background-color:#6d913a;  
}

ein

#maincontent_inner  
{  
height:100%;  
}

zu nehmen und wenn ja, wie war das Ergebnis?

Übrigens: Leitest Du alle Deine html-Ressourcen mit einem '<!--Force IE6 into quirks mode with this comment tag-->' ein und wieso steht das dort?

Mit lieben Grüßen aus Wien

Michi

[Michael]

Hallo,

Erstmal danke für die Antwort. Wenn ich
 #maincontent_inner{
 height: 100%;
 margin-right: 16px;
 margin-bottom: 12px;
}

verwende, ist das Layout zu groß, eben den Fehler den ich meine. unter www.kneissl.biz/entwurf sieht man das.

Andere Lösungsvorschläge?

Gruß aus Wien zurück ;-)

mfg,
Michael

[MichiN]

Hi Michael,

Andere Lösungsvorschläge?

Ja, ich habe Dich nicht umsonst gefragt, ob Du alle Deine html-Ressourcen mit einem '<!--Force IE6 into quirks mode with this comment tag-->' einleitest und wieso das dort steht.

Immer dann wenn es sich um Floats, Höhen, Breiten, Positionierung und Ähnlichem dreht, solltest Du Dich genau um das Gegenteil kümmern, nämlich dass sich der IE _nicht_ im Quirks-Modus befindet. Wobei Du natürlich nicht verraten hast, ob das, was Du meinst, im IE oder in einem richtigen Browser "falsch" ausgegeben wird.

Nochmal:

Wenn Du in den Body-Bereich einer _validen_ html-Ressource, die _nicht_ im Quirks-Modus ist, ein

<div style="width:50px; height:300px; background:blue;">  
 <div style="background:red;">  
 </div>  
</div>

einfügst, dann wird Dir das blau eingefärbte div ausgegeben. Von dem darin liegenden, rot eingefärbten div, siehst Du nichts, weil es keinen Inhalt und somit die Höhe 0 hat. Erweiterst Du diesen Code jetzt auf

<div style="width:50px; height:300px; background:blue;">  
 <div style="height:100%; background:red;">  
 </div>  
</div>

um, dann siehst Du _nur_ das rot eingefärbte innere div. Es hat nämlich jetzt 100% der Höhe seines Elternelements, dem blauen div, welches man somit jetzt nicht mehr sieht, weil es genau darunter liegt.

Wenn es bei Dir also nicht die 100% Höhe hat, liegt das an anderer Stelle. Wenn ich mir Deine CSS-Datei ansehe, habe ich das Gefühl, dass das nicht von Dir geschrieben ist, sondern zu 100% von wo auch immer übernommen worden ist. Wenn Du sowas nun verwendest und eine Ausgabe bekommst, die Du so nicht erwartest, ist eine Analyse bei einer deratig großen Menge an CSS-Anweisungen natürlich schwierig.

Der _umgekehrte_ Weg ist da der bessere. Nämlich von Null anzufangen und Element für Element mit CSS  zu stylen, wobei Du ein nächstes Element erst behandelst, wenn das zuletzt behandelte in allen Browsern so ausgegeben wird wie erwünscht.

Wenn Du _dann_ zu einem Punkt kommst, bei dem die Ausgabe der Seite nicht so ist wie von Dir erwartet, weißt Du genau, dass der Grund dafür nur an den letzten Veränderungen der CSS-Datei liegen kann.

Mit lieben Grüßen aus Wien

Michi

[michael]

hallo,

ich danke dir, du hast mich auf die richtige spur gebracht, an diese anweisung mit dem quirksmode habe ich einfach nicht mehr gedacht. ich habe die dateien von einem alten projekt von mir übernommen und das design aber jetzt komplett überarbeitet und darauf vergessen - und einfach überlesen.

auf alle fälle funktioniert es jetzt, danke!

mfg,
michael