✔ Höhe eines Divs: 100%- x px

[Superdok]

So hi, ich weiß nicht ob dies möglich ist, aber ich wollte einfach mal fragen. Und zwar hab ich ein Div, das sich an den Bildschirm anpasst. Funktioniert soweit auch super. Im Moment hat es genauso wie Body und html eine Höhe von 100% (im CSS festgelegt) und eine Hintergrundgrafik, die sich in y Richtung wiederholt. Dieses Div passt sich auch dem Bildschirm an, nimmt aber immer die volle Breite des Bildschirmes an.Ist es durch eine kleine Rechenaufgabe (von mir aus auch mit PHP) möglich, dem Div die Höhe von: 100% - x px ; x px steht für irgendeine Höhe.
Beispiel:
Ich will das ein Div die Höhe des Ganzen(im Beispiel jetzt 800px) minus 100 px hat. Also soll das Div später eine Höhe von 700px haben. Bei Anderen ist das Ganze aber nicht 800 px sondern nur 600 px, da die eine andere Auflösung haben.

Ist sowas möglich, das man durch Javascript oder CSS oder PHP oder was weiß ich, die Höhe des Ganzen (100%) minus irgendeine angegebene Höhe rechnet, und somit auf jedem Bildschirm der Welt, das gleiche Aussehen hat?

Mein Problem ist nämlich: Ich habe eine Header mit 100 px Höhe. Unterdrunter ist das Div, das den Rest des Bildschirmes füllen soll. Im FF macht er alles richtig und die höhe des Ganzen stimmt, im IE muss man aber mit "border-top: 100px solid #fff" das untere Div so weit runter schieben, das es 100% hat und nicht vom Header überdeckt wird.
Das Border-top ist zwar eine möglichkeit, aber aufgraund von durchsichtigen Grafiken auf der Seite haben die in dem Fall einen weisen Hintegrund und sind im IE6 nicht durchsichtig (Da hinter den Grafiken die weise Border ist).
Ich hab zwar schon versucht, anstatt der Border ein margin-top zu machen, allerdings interpretiert der IE das ganze dann flasch: er macht den Div zwar 100%, aber durch das margin verschiebt er die 100% um 100px nach unten, weshalb unter dem Footer 100px des Divs noch rausschauen (wenn man scrollt).
Ich hab mir deshalb gedacht, ich nehm für den IE 6 ein eigenes CSS und mach dort die Höhe 100% - 100px und einen margin-top: 100px.

Leider kann ich kein Quelltext hier zeigen, da es dort im Mom noch einige Probleme gibt. Aber das ist Ausschnittsweise und dort wo auch das problem mit dem IE ist:

html {
	height:100%;
	max-height:100%;
	padding:0;
	margin:0;
	border:0;
}
body {
	height:100%;
	max-height:100%;
	padding:0;
	margin:0;
	border:0;
	text-align:center;
	background-color: #000000;
	font-size: 13px;
	background-attachment: fixed;
	background-position: left top;
	background-image: url(../images/back.jpg);
	background-repeat: repeat-x;
}

#Container {   /*Div cder alles umrandet*/
	width:940px;
	position:relative;
	margin:0 auto;
	min-height:500px;
	height:100%; 
	text-align:left;
	z-index: 3;
}
#head {
	position:absolute;
	left:0;
	top:0;
	width:940px;
	min-width:940px;
	height:100px;
	z-index:5;
}

* html #maincontent {
	top:0;
	bottom:0;
	height:100%;
	border-top:100px solid #fff;		/*Leider geht hier das margin-top nicht, da sich sonst unter dem Footer die 100px rausschauen*/
}
#maincontent {
	display:block;
	overflow:hidden;
	position:absolute;
	z-index:3;
	top:170px;
	bottom:20px;
	width:940px;
	left:0;
	background:url(grafik.gif) repeat-y;
}

#foot {
	position:absolute;
	left:0;
	bottom:0;
	width:940px;
	height:30px;
	z-index: 5;
	background-image: url(../images/foot.gif);
	background-repeat: repeat-x;
	background-position: left top;
}

 

[Maik]

Hi,

in dem CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken wird neben der "border"-Technik ein alternativer Workaround mittels Javascript vorgestellt, um für den IE das Restmaß (Höhe/Breite) eines Elements im Viewport zu ermitteln.

 

[Superdok]

Du meinst wahrscheinlich diesen Teil:

#mitte {
              ...
              width: expression((document.body.clientWidth - 300) + "px");
                          /* left-Wert + right-Wert = 300 */
              height: expression((document.body.clientHeight - 200) + "px");
                          /* top-Wert + bottom-Wert = 200 */
          }
          #oben {
              ...
              width: expression(document.body.clientWidth + "px");
                          /* left-Wert + right-Wert = 0 */
          }
          #links {
              ...
              height: expression((document.body.clientHeight - 150) + "px");
                          /* top-Wert + bottom-Wert = 150 */
          }
          #unten {
              ...
              width: expression((document.body.clientWidth - 200) + "px");
                          /* left-Wert + right-Wert = 200 */
          }
          #rechts {
              ...
              height: expression((document.body.clientHeight - 200) + "px");
                          /* top-Wert + bottom-Wert = 200 */
          }
          ...

Leider komm ich da nicht ganz mit, da ich noch nie mit JS gearbeitet habe. Was muss ich dort ganz genau ändern? In meinem Fall ist über dem #Maincontent noch der Header mit 100px und später einmal noch eine Div Box mit 20px. Also insgesamt sind über dem #maincontent später noch 120px.
Die JS würde, wenn ich sie verstehen würde auch ausreichen, leider versteh ich im mom, auch nach durchlesen des Tutorials gar nichts.
Das liegt vielleicht auch daran, das als 2. Workaround die Methode mit dem "put IE into Quirks Mode gezeigt wird", die ich in meinem Fall ja auch schon benutze (siehe anderer Tread in diesem Forum)

EDIT: Was muss ich dieses "+px" eintragen?

 

[Maik]

Derzeit lauten die Einstellungen:

#head {
        position:absolute;
        left:0;
        top:0;
        width:940px;
        min-width:940px;
        height:100px;
}

#maincontent {
        display:block;
        overflow:auto;
        position:absolute;
        top:100px;
        bottom:30px;
        width:940px;
        left:0;
        background:url(grafik.gif) repeat-y;
        height: expression((document.body.clientHeight - 130) + "px");
                          /* top-Wert + bottom-Wert = 130 */
}

#foot {
        position:absolute;
        left:0;
        bottom:0;
        width:940px;
        height:30px;
        background-image: url(../images/foot.gif);
        background-repeat: repeat-x;
        background-position: left top;
}

Der Selektor * html #maincontent mit der border-Deklaration wird somit nicht mehr benötigt.

 

[Superdok]

Ah k danke funktioniert. Mich hat dieses + "px" und die ganzen verschiedenen Angaben irritiert. Logisch, ich brauch ja nur die height Angabe der "#mitte".