einem Element "übriggebliebene" Höhe/Breite zuweisen

[Timo]

Mein Problem:
ich habe bei meiner Seite ein div was 80px hoch ist. Nun will ich darunter ein div haben, dass bis zum unteren Ende der Seite geht. Ich weiß dass ich dem einen 10% und dem anderen 90% geben kann, aber ich will ja, dass das obere div eine feste größe hat, egal wie groß der User sein fenster macht.

Ist dies irgendwie zu realisieren (ohne javascript)? Wenn nicht, wie gehts dann mit javascript?

( Meine Intention ist es, einen festen Header über meiner Tabelle zu haben, der den Namen der Spalten anzeigt, egal wie weit man in der Tabelle runterscrollt )

[Gunnar Bittersmann]

@@Timo:

nuqneH

( Meine Intention ist es, einen festen Header über meiner Tabelle zu haben, der den Namen der Spalten anzeigt, egal wie weit man in der Tabelle runterscrollt )

Und warum dann 'div'? Den <http://de.selfhtml.org/html/tabellen/aufbau.htm@title=Aufbau einer Tabelle> kennst du? 'http://de.selfhtml.org/html/tabellen/aufbau.htm#kopf_koerper_fuss@title=thead'?

In vernünftigen Browsern kann man dan 'tbody' scrollen lassen bei festem 'thead'.

Ansonsten ist Gernot Backs Artikel Übergroße Tabellen in koordiniert scrollenden Frames was für dich.

Qapla'

[Azzu]

In vernünftigen Browsern kann man dan 'tbody' scrollen lassen bei festem 'thead'.

und wie oO?

[Gunnar Bittersmann]

@@Azzu:

nuqneH

In vernünftigen Browsern kann man dan 'tbody' scrollen lassen bei festem 'thead'.

und wie oO?

fest = fixed. Da 'thead' damit aus dem Fluss genommmen wird, sich die Breite der Zellen also nicht an den Breiten der Zellen des 'tbody' orientiert, sind explizite Breitenangaben nötig.

Außerdem braucht 'thead' einen Hintergrund; beim Default 'transparent' würde der 'tbody' sonst beim Scrollen unter dem 'thead' sichtbar sein. Die Tabelle muss am oberen Viewportrand beginnen; der Abstand wird über die Zellen des 'thead' geregelt:

html, body  
{  
	margin-top: 0;  
	padding-top: 0;  
}  
  
table  
{  
	border-collapse: collapse;  
}  
  
th, td  
{  
	text-align: left;  
	vertical-align: top;  
	width: 6em;  
}  
  
thead  
{  
	position: fixed;  
	background: white;  
}  
  
thead tr:first-child>*  
{  
	padding-top: 1.5em;  
}  
  
tbody tr:first-child>*  
{  
	padding-top: 3em;  
}

Markup:

<table>  
	<thead>  
		<tr><th>#</th><th>foo</th><th>bar</th><th>baz</th><th>quz</th></tr>  
	</thead>  
	<tbody>  
		<tr><th>1</th><td>foo</td><td>bar</td><td>baz</td><td>quz</td></tr>  
		<tr><th>2</th><td>foo</td><td>bar</td><td>baz</td><td>quz</td></tr>  
		<!-- usw. bis -->  
		<tr><th>666</th><td>foo</td><td>bar</td><td>baz</td><td>quz</td></tr>  
	</tbody>  
</table>

Qapla'

[Timo]

In vernünftigen Browsern kann man dan 'tbody' scrollen lassen bei festem 'thead'.

Wenn ich tbody und thead als block anzeigen lasse, tbody mit overflow scrollen lassen, ja. Aber ich muss immer noch eine bestimmte Höhe angeben, damit das funktioniert. Also doch mit javascript?

aber tlho' bisher, Gunnar.

[Timo]

xD man kann auch kompliziert denken. Ich hab jetz einfach ein position: fixed div als header eingebaut, damit gehts gut^^