CSS height: 100%-10px; ?

[hmpf]

Kennt jemand einen Hack, wie man die Höhe eines Elements wie im Thread Titel angegeben mit einer Kombination aus % und px angeben kann? Google hat mir bisher nicht die Lösung geliefert.

Das Element hat den Wert overflow-y: scroll, die Scrollbar muß der Höhe des Elementes entsprechen (tut sie normalerweise auch, aber deshalb kann ich die 10px z.B. nicht über den Innenabstand abziehen, weil dann die Scrollbar immer noch 100% hoch ist).

Und ich brauche das für den IE6. Danke!

[:: RK ::]

Zitat von hmpf

Und ich brauche das für den IE6. Danke!

Vergiss es

Kannst du mal n Screenshot anhängen, hab nicht 100%ig verstanden was du
mit der Scrollbar gemeint hast

Ich bezweifle aber jetzt schon, dass es mit CSS alleine geht.

[hmpf]

Also ich brauche das für den IE6, weil das ganze schon einen Notlösung für den IE6 ist. Das normale Layout funktioniert in dem ******browser nämlich nicht. So komme ich dem bisher am nächsten.
In dem Screenshot ist das Element mit der Scrollbar auf height: 100%, wie man sieht, würde ich von den 100% gerne die Höhe des Footers abziehen.

[hmpf]

Nächste Idee:

Ich packe das div nochmal in ein anderes div, das mit height:100% (also so wie im Screenshot) aber das bekommt unten noch einen Innenabstand von 10px. Müssten dann nicht für das innere div 100% dieselbe Höhe sein, wie 100%-10px für das äußere?
Dachte ich jedenfalls, scheint auch nicht zu funktionieren

[:: RK ::]

Zitat von hmpf

Nächste Idee:

Ich packe das div nochmal in ein anderes div, das mit height:100% (also so wie im Screenshot) aber das bekommt unten noch einen Innenabstand von 10px. Müssten dann nicht für das innere div 100% dieselbe Höhe sein, wie 100%-10px für das äußere?
Dachte ich jedenfalls, scheint auch nicht zu funktionieren

Innenabstand (padding) wird immer dazuaddiert. Beispiel:

div {
  height: 100px;
  width: 100px;
  padding: 10px;
}

Das DIV ist dann 120px hoch und 120px breit.

Wieso verschwindet der Container hinter dem Footer überhaupt?

Vielleicht kommst du auch um JS nicht herum. Aber soviel Aufwand für den IE6?
Schau mal ob du dein HTML und CSS nicht doch noch optimieren kannst.

[hmpf]

Natürlich habe ich schon rumprobiert, ob ich das irgendwie anders optimieren kann. Das Layout ist dreispaltig, wobei aber nur die mittlere Spalte scrollen soll. Deshalb liegt die im Hintergrund. Der Footer geht über alle drei Spalten und soll natürlich immer am unteren Bildrand stehen.

Bis jetzt ist das mein ganzer zusätzlicher Code nur für den IE6:

<!--[if IE 6]>
<style type="text/css">@import url(/css/ie6.css);</style>
<![endif]-->
<div id="ie6margin">
</div>
#main{
	position:absolute;	
}
#navigation ul li, ul.subNavigation li, ul.navigation li{
	zoom: 1;
}
#ie6margin{
	height:100%;
	display: block;
	position:absolute;
	left: 50%;
	width: 490px;
	margin-left: -245px;
	padding-bottom: 40px;
	text-align: left;
}
#content {
	display: block;
	position:static;
	left: 0px;
	margin-left: 0px;
	height:100%;	
	padding-bottom: 0px;
	overflow-y: scroll;
}

Soviel Aufwand war das bisher nicht.
Hm... vielleicht muß ich nur das mit dem Footer etwas anders lösen. Ich probiere es mal.

[Nicmare]

dein problemchen habe ich damals mit jquery gelöst. ansonsten kannst du es ja mal mit nem sticky-footer probieren?

[hmpf]

Der Stickyfooter funktioniert aber nicht wie erforderlich.

function kackBrowser(){
	window.onresize = onResize;
	onResize();
}

function onResize(){
	var c = document.getElementById('content');
	var winHeight = document.body.clientHeight;
	var footerHeight = 40;
	var h = winHeight-footerHeight;
	c.style.height = String(h)+'px';
}

Damit geht es jetzt. Jetzt sehen nur noch User mit IE6 und deaktiviertem Javascript das Layout nicht ganz richtig (hoffe ich, hab es noch nicht auf Mac getestet...). Damit sollte man leben können.

[Dennis]

fix positionierte elemente am unteren bildschirmrand haben mir mit sicherheit 10 jahre meines kostbaren lebens geraubt ...