Variabler Inhalts-Container

[Xebian]

Liebe Community,

ich stehe vor einem vermeindlich simplen Div-Konstrukt und komme nicht weiter.

Und zwar habe ich einen Header (width:100%, height:40px und einen Footer (width:100%; height:30px, sowie einen Inhaltscontainer dazwischen.
Header und Footer haben feste Höhen, daher soll der Inhaltscontainer sich, je nach Auflösung, ausdehnen auf height:100%, minus 40px vom Header und minus 30px vom Footer.
height:100%-40px-30px; funktioniert leider nicht Gibt es eine andere Möglichkeit?


Hier mal eine kleine Darstellung:
###### Header #######
++++++++++++++++++++
++++++++++++++++++++
++++++ Inhalt +++++++++
++++++++++++++++++++
++++++++++++++++++++
###### Footer ########

Ich hoffe, der HTML-Bereich ist richtig, da Divs ja auch einen guten CSS-Anteil enthalten.

Gruß,
Xebian

 

[Maik]

Hi,

das kommt darauf an, wie sich dein variabler DIV-Container bei zunehmenden Inhalt in seiner Höhe verhalten soll:

1. Mitwachsen, und den Footer nach unten schieben.
2. In seinem Anzeigebereich dem Benutzer einen Scrollbalken für den überlangen Inhalt anbieten.

Und für beide Fälle gibt's bei uns ein CSS-Tutorial

1. CSS-Layout mit 100%-Höhe
2. Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken

Ich bring den Thread somit auch im CSS-Forum unter

mfg Maik

 

[Xebian]

Hi Maik,

danke für die schnelle Antwort.
Der "Inhalts-Container" enthält einen weiteren, kleinen Container, der den eigentlichen Text enthält und mit overflow-y:auto belegt ist.

Das zweite Tutorial kommt dem zwar sehr änlich, allerdings wird der Footer nicht von dem "Inhalts-Container" beeinflusst.
Eine andere Möglichkeit wäre, die Höhe der Bildfläche per JavaScript zu ermitteln und diese dann, abzüglich der Höhen von Header und Footer, an das height-Attribut weiterzugeben.
Allerdings schränkt das die Benutzbarkeit wieder ein, da man zwingend JS aktiviert haben muss. Da würde ich dann doch lieber eine Tabelle nehmen.


Das ganze sieht wie folgt aus:

 

[Maik]

Der "Inhalts-Container" enthält einen weiteren, kleinen Container, der den eigentlichen Text enthält und mit overflow-y:auto belegt ist.

Das zweite Tutorial kommt dem zwar sehr änlich, allerdings wird der Footer nicht von dem "Inhalts-Container" beeinflusst.

Und wo ist das Problem? Kannst du das bitte etwas näher ausführen? Hast du evtl. einen Link zur Seite?

Ich versteh' gerade nicht, worauf du hinaus willst...

mfg Maik

 

[Xebian]

Ich habe die Seite mal hochgeladen:

http://xebian.xe.ohost.de/

Das Problem ist, dass ab einer bestimmten Auflösung, der Footer vom Inhaltsbereich verdeckt wird. Dieses möchte ich vermeiden. Die Seite soll ab einer bestimmten Höhe des Browserfensters nicht weiter zusammenschrumpfen.

 

[Maik]

Die Höhe des Browserfensters lässt sich so nicht limitieren.

Diverse Browser ermöglichen dies nur bei einem Popup-Fenster mittels der open()-Methode und ihrer Parameter "height=600" (Beispielwert) und "resizable=no".

In dem Beispiel des zweitgenannten Tutorials würde zumindest im mittleren Container #mitte ein Scrollbalken erscheinen, wenn die Viewporthöhe zu gering ist, und der Footer dadurch über die im Container #mitte befindliche Box #mycustomscroll geschoben wird, um die Box wieder vollständig in den sichtbaren Bereich des Containers zu holen.

mfg Maik