Hallo!
Ich habe ein Problem mit in CSS eingebettem CSS. Mein Ziel ist es, ein Layout zu erstellen, in dem der Footerbereich der Seite mit fester Höhe im unteren Bereich des Browserfensters "klebt". Der Contentbereich über dem Footer soll autromaisch skalieren, wenn die Fenstergröße des Browsers verändert wird. Das Problem ist die Browserkompatibilität der JavaScript-Variablen, die ich dafür in der CSS-Datei abfragen muss:
Funktioniert mit dem IE:
#content
{
position:absolute;
top:100px;
left:200px;
width: expression( document.body.offsetWidth - 240 + 'px');
height: expression( document.body.offsetHeight - 200 + 'px');
border-width:1px;
border-color:#0000FF;
border-style:solid;
z-index:2;
background-color:#AAAAAA;
}
#footer
{
position:relative;
top: expression( document.body.offsetHeight - 200 + 'px');
background-color:#EEEEEE;
left:0px;
width:100%;
height:100px;
border-width:1px;
border-color:#FF00FF;
border-style:solid;
}
Sollte mit Firefox und anderen Browsern funktionieren - tut es aber nicht:
#content[id]
{
position:absolute;
top:100px;
left:200px;
width: expression( window.innerWidth - 240 + 'px');
min-width: expression( window.innerWidth - 240 + 'px');
height: expression( window.innerHeight - 200 + 'px');
min-height: expression( window.innerHeight - 200 + 'px');
border-width:1px;
border-color:#0000FF;
border-style:solid;
z-index:2;
background-color:#AAAAAA;
}
#footer[id]
{
position:fixed;
bottom:0px;
background-color:#EEEEEE;
left:0px;
width:100%;
height:100px;
border-width:1px;
border-color:#FF00FF;
border-style:solid;
}
Wenn ich die entsprechenden Variablen durch Firefox mit einem Alert ausgeben lassen, sind Sie in jedem Fall korrekt. Sie finden bloß nicht den Weg in den CSS-Parser. Die beiden divs werden somit lediglich mit Höhe 0 angezeigt...
Hat vielleicht jemand eine Idee, wie sich dieses Problem beheben ließe? Bitte keine alternativen Tipps wie "Verwende Frames" o.ä.
Vielen Dank,
grüße
M.Heiderich