Willkommen auf dem Portal für Mediengestalter

pixelmusic · Threadersteller

Hallo zusammen,
im Rahmen meines Studiums bin ich gerade dabei eine Website aufzubauen, für eine Kooperation mit einem bekannten Unternehmen (weshalb ich auch keine kompletten Codes posten kann). Nun denn, noch im Grundgerüst stellt sich mir ein Problem in den Weg. Und zwar:

Erstellt werden soll eine vollkommen dynamische Website mit neuester HTML5 Technologie mit anfangs nur weniger Unterstützung von JavaScript. Verzichtet werden soll demnach auf eine Höhenangabe mittels "height", sowie statische absolute Angaben durch Pixel etc. Die Benutzung von min-height und max-height (mit prozentualen Angaben) für das Grundgerüst ist allerdings mir selbst überlassen.

Zum Problem:
Die Website besteht im Grundlegenden natürlich aus drei Einheiten: dem Header, dem Footer und dem Content-Bereich. Header und Footer sind fest am oberen und unteren Rand fixiert. Der Content-Bereich soll sich zwischen diesen beiden Einheiten befinden. Und dieser stellt gleichzeitig die Problemzone dar.
Der komplette Content-Bereich ist mit einem div-Container eingezäunt ("contentWrapper"). In diesem befindet sich im linken Teil der div-Container "Playlist", welcher eine Liste, gespeichert im div "list_playlist" besitzt. Da die Liste sehr lang wird, möchte ich, dass sich dieser div-Container mit einem Scrollbalken nach unten fahren lässt.
Ohne eine statische Angabe mit Pixeln bekomme ich die Höhe dieses Containers mit max-height nicht eingegrenzt. Wie bekomme ich es hin, dass sich nur diese List mit einem Scrollbalken regulieren lässt?

Ich hoffe ihr könnt mir helfen.. Vielen Dank schonmal!

-----
(verkürzter) HTML Code:
<html>
<head> ... </head>
<body>
<header> ... </header>
<div id="contentWrapper">
<div id="Playlist">
<div id="list_playlist>
SEHR LANGE LISTE
</div>
</div>
</div>
<footer> ... </footer>
</body>
</html>

MockUp meines Vorhabens:

Karlarsch · **Verfasst** Mi 01.05.2013 06:36 **Titel**

Du kennst "overflow"?

Gruß
Karl

pantonine · **Verfasst** Mi 01.05.2013 09:04 **Titel**

Morgo · **Verfasst** Mi 01.05.2013 16:38 **Titel**

pixelmusic · Threadersteller

Danke für die Antworten bisher!

Natürlich kenne ich overflow, doch leider bringt mir dies auch nicht weiter.

Unter dynamisch verstehe ich, dass sich die Website der Auflösung eines Displays anpasst. Ich möchte die Höhen- und Breitenangabe nicht statisch mit Pixeln umsetzen, sondern dynamisch mit Prozentangaben.
Setze ich einen prozentualen max-height für den Container "contentWrapper" fest, während die list_playlist sehr lang ist, erhalte ich einen Scrollbalken für den gesamten Content-Bereich. Dies möchte ich nicht, sondern nur für die genannte Liste auf der linken Seite.

Ich werde nachher einen Auszug meines Codes hochladen.

dercem · **Verfasst** Mi 01.05.2013 18:34 **Titel**

pixelmusic · Threadersteller

Ich habe es mit diversen Befehlen versucht, darunter auch overflow.
Meiner Meinung nach gibt es ein Problem mit den erbenden, drüberliegenden div-Containern. Den div-Container "contentWrapper" habe ich mit einer max-height von 80% festgelegt, den div-Container "Playlist" mit einer maximalen Höhe von 100%. Alleine aus der Logik heraus müsste dies doch kein Problem ergeben, oder?

ChrisKam · **Verfasst** Fr 03.05.2013 11:46 **Titel**

Lad' mal das ganze Ding hoch, das Du bislang hast. Das Gerüst mit Lipsum reicht ja.

Willkommen auf dem Portal für Mediengestalter

Thema: max-height verschachtelter div-Container vom 30.04.2013

max-height verschachtelter div-Container

Re: max-height verschachtelter div-Container