2 spaltiges Layout unabhängig voneinander scrollen

Plasm · 28. Jan. 2008

Hi,

Ich habe eine Seite in der links ein Navigationsmenü und rechts der Inhalt ist. Nun kann sowohl der Inhalt, als auch das Menü relativ lang werden. Wenn dann z.B. der Inhalt sehr lang ist, das Menü aber recht kurz, soll das Menü nicht verschwinden wenn man den Inhalt nach unten scrollt - genauso anders herum (wenn das Menü lang ist aber der Inhalt kurz).
Also möchte ich gerne beide Bereiche unabhängig voneinander scrollen können.
Mit einem Frameset würde sowas gehen - aber einen Frameset kann (darf) ich nicht verwenden.

Ich habe jetzt schon viel mit der overflow: - Eigenschaft rumprobiert und den Haupt-Scrollbalken (den der Seite an sich) ausgeblendet. Das Problem dabei ist aber: overflow funktioniert bei div-Containern sehr gut, allerdings kann ich keine 2 div-Container nebeneinander legen, da die rechte Spalte eine feste Breite hat und die linke Seite den Rest der Seite ennehmen soll - ich kann also bei dem rechten div keine breite definieren (müsste dann ja z.B. 100%-200px lauten - vielleicht geht sowas mit position:relative ???). Wenn ich statt der div-Container eine 2-spaltige Tabelle verwende, funktioniert overflow nicht mehr anständig. Ich wollte nun beides kombinieren, in dem ich eine 2-spaltige Tabelle definiere, in deren 2 Zellen ich je einen div-Container lege - doch auch das klappt bisher nicht.

Ich habe eine Version hinbekommen die funktioniert, wenn man als Höhe für die Tabelle einen festen Wert angibt - sobald ich das aber auf 100% setze klappt es in keinem Browser mehr (die Browser verhalten sich zudem dann auch unterschiedlich).

Hier der Quellcode dazu:

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>Test</title>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	</head>
	<body style="border:0px; margin:0px; overflow:hidden;">
		<table border="0" cellspacing="0" cellpadding="0" width="100%">
			<tr valign="top">
				<td width="300" style="height:500px;">
					<div style="background-color:#FFCCCC; overflow:auto; height:100%;">
						bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
					</div>
				</td>
				<td style="height:500px;">
					<div style="background-color:#CCFFCC; overflow:auto; height:100%;">
						bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>

Sobald man die 500px auf 100% ändert läuft es nicht mehr.
Hat hier vielleicht jemand eine Idee wie gehen könnte ?

Vielen Dank schon mal im Voraus!
MfG
Jan-Philipp

anna55 · 28. Jan. 2008

Kam mit Deiner Beschreibung gar nicht zurecht: rechte Spalte feste Breite, dann wieder nicht.
Also Tabellen gehen nicht zu Layoutzwecken.
Habe mal etwas gebastelt. Schau mal, ob das was für Dich ist:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Zwei scrollbare Divs</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

#nav {
height: 99%;
width: 300px;
background: #0086d7;
float: left;
overflow: auto;
}

#content {
height: 99%;
overflow: auto;
background: #efefef;
width: auto;
}
</style>
</head>
<body>
<div id="nav">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br><br>
</div>

<div id="content">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>
</div>

</body>
</html>

2 spaltiges Layout unabhängig voneinander scrollen

Plasm

New member

anna55

Moderator