✔ DIV zentriert und dynamische Höhe ...

D

derSESO

Grünschnabel
Hallo!

Ich steh irgend wie total auf'm Schlauch und komm einfach nicht weiter!

Ich habe eine Tabelle, die ist 100% hoch, mit 3 Zeilen.
Die erste und dritte Zeile sind fix in der Höhe, die zweite ist dynamisch.
Somit habe ich zu 99% keinen Scrollbalken auf der Seite - was das Ziel war.

Nun soll in der zweiten Zeile der Inhalt/Content zu sehen sein.
Allerdings eben nicht direkt in der Tabelle, sondern in einem DIV.
Grund: Dieser soll sich dynamisch in der Höhe an den verfügbaren Platz anpassen und Scrollbar sein, wenn der Inhalt länger ist.

So, aber irgendwie stell ich mich da zu blöd an.
Habt ihr vielleicht die Lösung?
Achja, habe mal eine Grafik angehängt, damit man so in etwa sieht, was ich meine.
 

Anhänge

  • div_problem.jpg
    div_problem.jpg
    40,1 KB · Aufrufe: 63
Hi,

ich empfehle dir, dein Vorhaben anstelle der Tabelle anhand meines Tutorials CSS-Layout mit 100%-Höhe umzusetzen.

In deinem Fall kommt da die Beispielvariante "Modell mit Header und Footer" in Betracht.

Der Trick liegt darin, dass der Hintergrund für den mittleren Bereich im übergeordneten DIV #wrapper erzeugt wird, das sich vom oberen bis zum unteren Fensterrand erstreckt, und den optischen Eindruck vermittelt, dass das mittlere DIV trotz wenig Inhalt vom Header bis zum Footer reicht.

mfg Maik


//edit: Stop. Der mittlere Bereich soll scrollbar sein, wenn darin der Inhalt zunimmt?

Da hilft dir das Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken weiter.

Und als praktisches Beispiel: http://www.cssplay.co.uk/layouts/bodyfix.html
 
Hi!

Also ich habe bis jetzt folgende Lösung:

Code: 
#head
{
 position: absolute;
 margin-left: -485px;
 left: 50%;
 top: 0;
 width: 950px;
 min-width: 950px;
 height: 200px;
 z-index: 5;
 background: #FFCCCC;
}
#foot
{
 position: absolute;
 margin-left: -485px;
 left: 50%;
 bottom: 0;
 width: 950px;
 min-width: 950px;
 height: 35px;
 z-index: 5;
 background: #CCCC99;
}
#cont
{
 display: block;
 overflow: auto;
 position: absolute;
 z-index: 3;
 top: 200px;
 bottom: 35px;
 width: 950px;
 min-width: 950px;
 margin-left: -485px;
 left: 50%;
}

Code: 
<div id="head"></div>
<div id="foot"></div>
<div id="cont">div>

Was noch fehlt, ist ein DIV, der das Hintergrundbild für alle anderen DIV's legt.
Also "praktisch" ein DIV um die anderen 3 DIV's. :)
 
Dann nutze einfach das <body>-Element, das den Hintergrund des "Viewports" (= Anzeigebereich im Browserfenster) definiert.

In der Beispielvorlage deines übernommenen Codes lautet der dazugehörige Deklarationsblock:
CSS: 
body {
	height:100%; 
	max-height:100%; 
	overflow:hidden; 
	padding:0; 
	margin:0; 
	border:0;
	background:rgb(209,205,193);
	}

mfg Maik
 
Hi!

Vielen Dank für deine Hilfe.
Das mit der HG-Grafik im BODY ... manchmal sieht man den Wald vor lauter Bäumen nicht. :)

Also dann ... Problem erfolgreich gelösr.
Danke nochmal!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück