nicht angemeldet
Hi,
ich bin dabei ein Layout mit CSS auszuarbeiten und komme gerade nicht recht weiter.
Ziel ist es oben einen Header zu haben und darunter 2 Spalten.
Die 2 Spalten sollen Ihre eigenen Scrollbalken haben, also so wie es "früher" bei Framesets war.
Testweise habe ich für die linke Spalte mal einen Div mit 100% Höhe genommen und diesen auf overflow:auto gestellt.
Das funktioniert an sich ganz gut:
Ist der Inhalt der Spalte zu hoch, wird ein Scrollbalken in dieser angezeigt (getestet: IE6, FF3). Zudem werden beim Anpassen der Festergröße ebenfalls alle Höhen berücksichtigt/angepasst.
Allerdings möchte ich über den Spalten noch einen 50px hohen Header einbauen, womit die Probleme dann auch beginnen :D
Wie bekomme ich es hin, dass die Spalten immer gerade genauso hoch sind, dass sie den Bildschirm ausfüllen und dadrüber noch der 50px hohe Header passt?
Gruss
MRoy
Anbei das XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>test</title>
<link rel="stylesheet" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="left">
test<br />test<br />test<br />test<br />test<br />test<br />test<br />...
</div>
</body>
</html>
und das CSS:
*, html, body {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#left {
background-color: red;
height: 100%;
width: 200px;
overflow: auto;
}