DIV, Container und vertikale "Raumausnutzung" .-)

[Treeda]

Hallo zusammen,

ich hoffe mir kann evtl hier jemand mit einem Problem helfen über das ich immer wieder stolpere (scheinbar sind die Designs immer ähnlich) aber bis jetzt keine sinnvolle Lösung gefunden habe.

Es geht darum wie sich div Tags in einem Container aufteilen.

Beispiel:

<div style="overflow:hidden;width:370px;height:500px;border:solid black 1px;">  
[code lang=html] <div style="height:50px;">Iam the header</div>  
 a bit blabla  
  
 <div style="overflow:auto;border:solid blue 1px;">  
  scrollable container  
  <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x  
 </div>

</div> [/code]

Der äussere container ist fix und wird im layout von einer globalen resize funktion entsprechend angepasst (die breite ist immer gleich aber die höhe ändert sich jenachdem wie der user den browser resized)

Wie krieg ich nun den unteren inneren (overflow) container dazu sich den rest innerhalb des containers zu krallen? 100% geht nicht, weil darüber ja noch ein header steht und sich die prozentangaben ja nur auf den umgebenen container beziehen.

Eine Tabelle hab ich auch schon probiert, funktioniert aber leider nicht weil die sich scheinbar endlos vertikal ausdehnt.

Fazit: Wie krieg ich den unterne inneren Div dazu sich den rest zu krallen und scrollbar zu bleiben?

Gruß
Treeda

[suit]

Es geht darum wie sich div Tags in einem Container aufteilen.

elemente

Beispiel:

<div style="overflow:hidden;width:370px;height:500px;border:solid black 1px;">

[code lang=html] <div style="height:50px;">Iam the header</div>
a bit blabla

<div style="overflow:auto;border:solid blue 1px;">
  scrollable container
  <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x
</div>

>   
> </div> [/code]  
>   
  
warum nicht so  
  
~~~html
<div>  
  <h2>ich bin die überschrift</h2>  
  <p>ein bisschen blah blah</p>  
  <div>  
    <p>scrollable container</p>  
  </div>  
</div>

Der äussere container ist fix [...] wie krieg ich den unterne inneren Div dazu sich den rest zu krallen und scrollbar zu bleiben?

kannst du deinen code näher beschreiben (css-seitig) da ich mit "fix" zb nix anfangen kann - heisst das "feste größe" oder "position: fixed" oder was? - sprich ist das bisschen inlinecss schon alles?

---

wenn ich das alles richtig verstehe, willst du einen scrollbaren container mit einer überschrift darüber?

[Treeda]

warum nicht so

<div>

<h2>ich bin die überschrift</h2>
  <p>ein bisschen blah blah</p>
  <div>
    <p>scrollable container</p>
  </div>
</div>

  
Das ist doch das gleiche .-)  
  

>   
> > Der äussere container ist fix [...] wie krieg ich den unterne inneren Div dazu sich den rest zu krallen und scrollbar zu bleiben?  
>   
> kannst du deinen code näher beschreiben (css-seitig) da ich mit "fix" zb nix anfangen kann - heisst das "feste größe" oder "position: fixed" oder was? - sprich ist das bisschen inlinecss schon alles?  
>   
> ---  
>   
> wenn ich das alles richtig verstehe, willst du einen scrollbaren container mit einer überschrift darüber?  
  
Hi ja, im prinzip schon, nur muss sich dieser scrollbare container mit überschrift (überschrift ist ein divtag mit text) in einem container befinden und sich an diesen anpassen (höhe und breite)  
  
das bischen inlinecss ist schon alles was für den Fall relevant ist, ja .-) Der code da oben ist das gesamte testszenario.  

[suit]

Das ist doch das gleiche .-)

nein, deins ist eine div-suppe mit inline-css

meins ist eine wohlschmeckende zucchinischaumsuppe ;)

Hi ja, im prinzip schon, nur muss sich dieser scrollbare container mit überschrift (überschrift ist ein divtag mit text) in einem container befinden und sich an diesen anpassen (höhe und breite)

das bischen inlinecss ist schon alles was für den Fall relevant ist, ja .-) Der code da oben ist das gesamte testszenario.

eine schnellschusslösung:

  
<div id="eins">  
  <div id="zwei">  
    <h2>ich bin die überschrift</h2>  
    <p>ein bisschen blah blah</p>  
  </div>  
  <div id="drei">  
    <p>scrollable container</p>  
  </div>  
</div>

eins hat eine feste höhe aber kein overflow hidden und ist so hoch, wie der scrollbare bereich sein soll

zwei wird negativ nach oben rauspositioniert (oder mit negativem margin rausgeschoben)

drei ist letztendlich scrollbar

ggf ist es das, was du meinst bzw es hilft dir weiter

[Treeda]

eine schnellschusslösung:

<div id="eins">
  <div id="zwei">
    <h2>ich bin die überschrift</h2>
    <p>ein bisschen blah blah</p>
  </div>
  <div id="drei">
    <p>scrollable container</p>
  </div>
</div>

>   
> eins hat eine feste höhe aber kein overflow hidden und ist so hoch, wie der scrollbare bereich sein soll  
>   
> zwei wird negativ nach oben rauspositioniert (oder mit negativem margin rausgeschoben)  
>   
> drei ist letztendlich scrollbar  
>   
> ggf ist es das, was du meinst bzw es hilft dir weiter  
  
Hi, nette Idee aber nein das ist keine Lösung. Wie ich sagte das ganze geraffel muss IN einem Container liegen.  
  
Stell dir einfach konkret eine Website vor die einen div tag irgendwo hat in die je nachdem was angeklicjt wurde content geladen wird. Dieser Container ist der fixe container den ich hier habe (fix heisst hier es hat breite und höhe in pixel)  
  
Der content der dadrin dargestellt werden soll muss innerhalb des fixen containers sein und sich an diesen anpassen, wie oben beschrieben.  
  
Das prob treibt mich noch in den Wahnsinn.  
  
  
  

[suit]

Stell dir einfach konkret eine Website vor die einen div tag irgendwo hat in die je nachdem was angeklicjt wurde content geladen wird. Dieser Container ist der fixe container den ich hier habe

div-element ;)

wie meinst du das "geladen?" - mit javascript/ajax?

wenn das ganze "drin" sein soll, gibts noch die möglichkeit eines padding-top: für den äusseren container

[Treeda]

Stell dir einfach konkret eine Website vor die einen div tag irgendwo hat in die je nachdem was angeklicjt wurde content geladen wird. Dieser Container ist der fixe container den ich hier habe

div-element ;)

Wirst du hier für Wortbelehrungen bezahlt oder bist du nur im Klugscheissmodus ? :-) Das Ding heisst bei mir Div Tag, denn der Tag Div ist ein Tag, ich red ja nicht im Node style :-)

wie meinst du das "geladen?" - mit javascript/ajax?

Ja welche möglichkeit kennst du denn noch den content eines DivTags zu füllen? .-)

wenn das ganze "drin" sein soll, gibts noch die möglichkeit eines padding-top: für den äusseren container

Mir ist nicht klar wie das funktionieren soll? wenn ich den container praktisch mit einem padding wieder reindrücke dürfte die höhe nicht mehr hinkommen.

Ich komme langsam zum den Schluß das es einfach nicht möglich ist... .-/ zumindest nicht ohne javascript

[suit]

Wirst du hier für Wortbelehrungen bezahlt oder bist du nur im Klugscheissmodus ? :-) Das Ding heisst bei mir Div Tag, denn der Tag Div ist ein Tag, ich red ja nicht im Node style :-)

element

und nein, kein klugscheissmodus sondern essentiell wichtig für die kommunikation

Ja welche möglichkeit kennst du denn noch den content eines DivTags zu füllen? .-)

element :)

mit php zb, serverseitig lässt sich html auch zusammenbauen

wenn du ohnehin mit javascript machst, warum berechnest du die höhe dann nicht auch mit javascript? offsetHeight hilft hier zb

wenn das ganze "drin" sein soll, gibts noch die möglichkeit eines padding-top: für den äusseren container

Mir ist nicht klar wie das funktionieren soll? wenn ich den container praktisch mit einem padding wieder reindrücke dürfte die höhe nicht mehr hinkommen.

ja aber 100% der höhe stimmt dann mit dem verbleibenden platz überein, wenn du die überschrift und den text in den bereich des padding schiebst

Ich komme langsam zum den Schluß das es einfach nicht möglich ist... .-/ zumindest nicht ohne javascript

doch doch, mit tabelleneigenschaften oder einer tabelle ;) aber da wird der ie6 keine freude haben