CSS Spaltenlayout
0 0 0 
molily
CSS Spaltenlayout
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;
}
-
Also bisher habe ich mein Problem mit JavaScript gelöst. Dass ich es mit Javascript an sich gelöst habe, ist nicht schlimm, da das ganze sowieso eine Ajax-Anwendung wird.
Wenn trotzdem jemand eine Lösung ohne Javascript hat ... immer her damit :-)Jedenfalls passe ich bei onResize die Höhe der Spalte nun direkt mit Javascript an.
function updateSize() { bodyHeight = $$('body')[0].offsetHeight; $('left').style.height = (bodyHeight-50) + 'px'; $('temp').innerHTML = ''; }Das funktioniert soweit jetzt auch.
Merkwürdig ist jedoch, dass der IE die letzte Zeile noch braucht, wo dem Element 'temp' ein leerer Inhalt zugewiesen wird. Ohne diese Anweisung wird die Höhe "nicht immer" sofort angepasst, sondern erst beim Interagieren auf der Webseite.
Ich nehme an, dass die Höhe an sich zwar schon angepasst wird, aber der IE6 das nicht als Grund nimmt, um die Seite neu zu zeichnen. Mit der innerHTML-Anweisung wird somit zwar nichts an der Seite verändert, aber der IE6 aktualisiert auf diese Weise die Höhe bei jedem Resize.Weiss es jemand genau? Liege ich mit der Vermutung richtig, oder habe ich etwas falsch gemacht, bzw. kann ich es auch ohne den innerHTML-Umweg lösen?
Gruss
MRoy-
$('left').style.height = (bodyHeight-50) + 'px'; $('temp').innerHTML = '';ich weiss ja nicht, was für ein Framework Du benutzt, aber bist Du sicher, dass Du mit $('left') $('temp') auf irgendwelche Elemente zugreifen kannst? Tippe eher auf $('.left') / $('.temp') oder $('#left') / $('#temp').-
ich weiss ja nicht, was für ein Framework Du benutzt, aber bist Du sicher, dass Du mit $('left') $('temp') auf irgendwelche Elemente zugreifen kannst?
Prototype oder Mootools haben eine Dollar-Funktion, die so funktioniert.
Tippe eher auf
$('.left') / $('.temp') oder $('#left') / $('#temp').Das wäre jQuery. Das Äquivalent in Mootools und Prototype ist die Funktion $$.
Mathias
-
-