✔ Dynamische Div-Höhe mit Scrollbar

[dr_d00m]

Hallo zusammen,
ich bin ziemlich neu in CSS, deshalb habt Nachsicht, falls die Frage zu subtil sein sollte

Also zum Problem. Ich möchte mit CSS eine Seite gestalten, die über Header, Content und Footer verfügt. Im Content habe ich dann ein weiteres Div, in dem ein Baum platziert ist. Wird der Baum ausgeklappt, soll (wenn er höher als die komplette Seite ist) eine Scrollbar eingeblendet werden, mit der man den Rest des Baumes sichtbar machen kann.
Ich hab ein kleines Bild in den Anhang gestellt, das den Zusammenhang klarer machen soll.
Wie schon gesagt soll die Div-Höhe des Divs in dem der Baum liegt, sowie die des Content-Divs variabel sein, so dass sie sich verschiedenen Auflösungen anpassen kann.
Ich habe herausgefunden, dass sich mit overflow eine Scrollbar einblenden lässt. Diese wird beim Aufklappen des Baumes aber entweder nicht angezeigt, weil sich das Div automatisch über den Bildschirm hinaus vergrößert oder ist fest, wenn man dem Div eine feste Höhe mitgibt, was ich ja vermeiden möchte.
So, ich hoffe ich hab nichts vergessen. Danke schonmal für jegliche Hilfe.

Gruß

dr_d00m

 

[Maik]

Hi,

vielleicht hilft dir hier das CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken weiter?

mfg Maik

 

[dr_d00m]

Hallo und Danke für die Antwort.
Ich hab mir das Tutorial angesehen und wenn ich das richtig verstanden habe lässt sich mein Problem browserunabhängig eigentlich nur mit Javascript lösen. Das deckt sich auch damit was mir ein befreundeter Webdesigner gesagt hat.
Nun habe ich versucht die Javascript-Lösung aus dem Tutorial in meine CSS Datei zu übernehmen. Geht das überhaupt? Funktioniert hat es jedenfalls mal nicht...
Was vielleicht noch wichtig wäre an dieser Stelle ist, dass die Seite eine ASP.NET Seite ist. Falls das für das Design einen Unterschied macht, wollt ich das angemerkt haben. Allerdings denke ich nicht, dass das problematisch ist, da die CSS-Datei eigentlich nicht vom Server behandelt wird.
Wie dem auch sei, wäre ich für weitere Tipps dankbar.

Gruß
dr_d00m

 

[Maik]

Dann solltest du mal genauer erläutern, was du überhaupt unter "dem Aufklappen des Baumes" verstehst.

Zudem wird in dem empfohlenen Tutorial auch eine browserübergreifende Technik ohne JS vorgestellt.

mfg Maik

 

[dr_d00m]

Hallo.
Nun ja,es handelt sich um ein TreeView-Steuerelement, das dynamisch mit Daten befüllt wird. Wenn man den Baum aufklappt, können bis zu 100 neue Elemente hinzugefügt werden, was natürlich den Rahmen der Seite sprengt.
Zur Erläuterung:

zugeklappt:
+ Baum

aufgeklappt:
-Baum
+Element1
+Element2
+Element3
...
+ElementN

Die einzelenen Elemente können dann wieder erweitert werden. Dieser Baum liegt innerhalb eines Divs, welches sich mit der Größe des Baumes erweitern soll. Dabei soll die maximale Größe durch den Browserrand begrenzt sein und eine Scrollbar für die Anzeige der restlichen Elemente zuständig sein.
Ich hoffe das verdeutlicht etwas meine Darstellung.

Die zweite browserunabhängige Methode hab ich zuerst überlesen. Danke nochmal für den Hinweis. Allerdings muss ich sagen, dass mir als Anwendungsentwickler, der eingentlich nicht aus dem Webdesign kommt, die JavaScript-Methode eher zusagt. Wohl auch, weil ich noch recht neu in CSS bin.

Ich hoffe mal, dass ich den Zusammenhang einigermaßen deutlich gemacht hab.

Gruß
dr_d00m

 

[Maik]

Dann sollte dir aber eigentlich das Tutorial, egal, ob nun mit oder ohne JS, weiterhelfen.

Alternativ kannst du es ja mal mit dem Beispiel http://www.cssplay.co.uk/layouts/bodyfix.html überprüfen, dessen Technik der zweiten Tutorial-Variante gleichkommt, oder andersherum, je nachdem, wie man's sieht.

mfg Maik

 

[dr_d00m]

Also mit Javascript hab ich es hingekriegt.

Danke für die Unterstützung.

Gruß
dr_d00m

 

[Maik]

Fein. Könntest du dann hier bitte auch deinen Lösungsansatz veröffentlichen, damit zukünftige Hilfesuchende in dem Thread eine Alternative zu meinen Vorschlägen vorfinden?

Vielen Dank!

mfg Maik

 

[dr_d00m]

Aber klar doch

Ich hab es etwas anders gemacht, als im Tutorial beschrieben. Einerseits, um die Seite kompatibel zu meheren Browsern zu halten (beim Testen funktionierte der Ansatz aus dem Tutorial im FF nicht) und andererseits, weil ich beim googeln darauf gestoßen bin, dss man kein Javascript in CSS Dateien einfügen kann.
Von der CSS Seite bleibt alles wie gehabt:

#tree
{		
	float: left;
	width: 190px;
	overflow: auto;
}

Man beachte, dass hier keine Höhe für das Div gegeben ist.

In der Seite setzt man dann ein Javascript ein, dass die Höhe dynamisch verändert:

<script language="javascript" type="text/javascript">
function setTreeHeight ()
{
    var windowHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) 
    {
        //Non-IE
        windowHeight = window.innerHeight;
    } 
    else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        windowHeight = document.documentElement.clientHeight;
    }
    //windowHeight - Header - Footer
    treeHeight = windowHeight - 177; 
    document.getElementById('tree').style.height = treeHeight + "px";
}
window.onload=setTreeHeight;
window.onresize=setTreeHeight;

</script>

Im Prinzip läuft das ganze natürlich ähnlich, wie im Tutorial, nur dass das Script den Style ändert und ihm kein neuer Wert zugewiesen wird.

Ich hoffe das hilft mal jemandem.

Gruß
dr_d00m