[CSS] Höhe von Boxen

Nase

Lieutenant
Dabei seit
Jan. 2004
Beiträge
587
Es gibt immer wieder Tage, an denen ich mich frage, warum ich meine Webseiten nicht einfach wieder mit einem Tabellen-Grundgerüst ausstatten soll. Heute ist mal wieder so einer.

Folgendes Problem (wenn man es so nennen kann, eigentlich sollte es nicht mal erwähnenswert sein):

Ich habe eine div-Box, Breite 150px. Diese Box soll sich jetzt über die gesamte Höhe der Webseite erstrecken. Bei height: 100%; wird diese folglich nur so groß, wie das Browserfenster ist. Nun wird es aber auch der Fall sein, dass der Content, rechts neben dieser Box, mehr Platz braucht als das Browserfenster hoch ist. Nur soll sich die Box bis zum Ende des Contentbereiches erstrecken, was sie aber nicht macht.
Ich kann mir irgendwie nicht vorstellen, dass das ein schwieriges Unterfangen sein soll, aber ich komme einfach nicht drauf, wie ich es lösen soll.

Wie immer bin ich für Lösungsvorschläge sehr dankbar!
 

pcw

Lt. Commander
Dabei seit
Juli 2001
Beiträge
1.658
Schreib das DIV in eine Tabellenspalte mit maximalem ROWSPAN und HEIGHT="100%" und gib ihm position:absolute sowie height:100%

Das einzige Problem bei der Sache ist halt nur, dass du dieses Tabellenfeld brauchst, das auch ohne weiteren inhalt angezeigt wird. Optimal wär daher, wenn es dieses Feld eh schon gibt.
 

Nase

Lieutenant
Ersteller dieses Themas
Dabei seit
Jan. 2004
Beiträge
587
Der Witz an der Sache ist ja, dass ich das Layout ohne Tabellen aufbauen will. Wenn ich Tabellen benutzen würde, dann wäre das ja alles kein Problem, aber so... Ich hab keine Idee, wie ich das lösen sollte.
 

value

Commander
Dabei seit
Dez. 2003
Beiträge
2.086
Oder, wenn du keine Tabellen verwenden möchtest die Angabe der Höhe in Pixel ?

hö ? das is zu einfach, oder ?
 

Feerix

Cadet 4th Year
Dabei seit
Jan. 2004
Beiträge
107
Auch in CSS sind tabellen definiert ;)

Aber wenn du keine tabellen benutzen willst. Versuch doch die DIVs zu untergliedern, so dass eine Abhängigkeit entsteht. Dabei wäre ich aber immer sehr vorsichtig, weil die Browser alles gern unterschiedlich intrepretieren.
 

Nase

Lieutenant
Ersteller dieses Themas
Dabei seit
Jan. 2004
Beiträge
587
Was bringt es mir, die Höhe fest (in Pixeln) anzugeben, wenn der Content eine variabele Höhe hat?

Die divs abhängig von einander zu machen, wäre auch schlecht, zumindest bei meinem Design.
Zur Zeit ist alles so aufgebaut:

Code:
  div 1      div 2                div 3
+--------+---------+-------------------------+
|        |         |                         |
|        |         |                         |
|        |         |                         |
|        |         |                         |
|        |         |                         |
In den ersten beiden divs ist das Menu + Untermenu, div 3 ist der Contentbereich. div 1 und div 2 sollen jetzt genau so hoch sein wie div 3.
 

Loopo

Admiral
Dabei seit
Juli 2002
Beiträge
7.610
wie wär's, wenn du die 3 Div's in einer großen zusammenfasst?
 

Loopo

Admiral
Dabei seit
Juli 2002
Beiträge
7.610
Zitat von pcwTJaR:
Dann hat er immernoch das Problem, dass sich DIV's nicht Freiwillig NEBENEINANDER anordnen lassen ;)
mit
PHP:
style="position: absolute; left: 200px; top: 0px;"
nicht ;)

so ich hab's mal getestet, das Problem mit der Höhe ist damit aber auch nicht gelöst :rolleyes:
 

Anhänge

pcw

Lt. Commander
Dabei seit
Juli 2001
Beiträge
1.658
ja, dass das geht ist mir klar, aber position:absolute nimmt immer die Zeichenfläche des Fensters als bezug und nicht das umgebende Element.

Damit machst du es dir dadurch quasi unmöglich, dich nach einem anderen Element zu richten.

Ich hab zwar keine Ahnung von Javascript, aber hat mal wer versucht, die Höhe des anderen DIV in Pixeln auszulesen udn dem Menü zuzuweisen?
 

Nase

Lieutenant
Ersteller dieses Themas
Dabei seit
Jan. 2004
Beiträge
587
Sorry, aber soweit möchte ich dann doch nicht gehen, Javascript für sowas zu verwenden.
Mir ist bis jetzt immer noch nichts brauchbares eingefallen :(
 

Feerix

Cadet 4th Year
Dabei seit
Jan. 2004
Beiträge
107
Man kann ja verschachteln:
Code:
<div>
       <div>
       </div>
        <div>
        </div>
</div>
Da muss man nur wegen Browserkompatibilität schauen. Der IE hat in CSS eher ne 4+ verdient.
 

Nase

Lieutenant
Ersteller dieses Themas
Dabei seit
Jan. 2004
Beiträge
587
Da habe ich auch schon dran gedacht, nur stellt sich dann wieder das Problem, dass ich mein Design umkrempeln müsste. Denn div1 hat eine eigene Hintergrundfarbe genau wie div2. Wenn ich div2 und div3 in div1 schachteln würde, wäre ja der Hintergrund von der gesamten der von div1. Dann müsste man wieder auf Bilder zurückgreifen etc.
 

Loopo

Admiral
Dabei seit
Juli 2002
Beiträge
7.610
Zitat von Feerix:
Man kann ja verschachteln:
Code:
<div>
       <div>
       </div>
        <div>
        </div>
</div>
Da muss man nur wegen Browserkompatibilität schauen. Der IE hat in CSS eher ne 4+ verdient.
oh man das hab ich doch schon oben angeraten und dann mit einem Beispiel auch gleich widerlegt, dass es auch so nicht funktioniert :rolleyes:
 

pcw

Lt. Commander
Dabei seit
Juli 2001
Beiträge
1.658
Also ich kann dir 3 Farbige Streifen mit DIV's nebennanderzaubern, die alle gleichlang sind, aber wie man da inhalt reinbekommen soll... keine Ahnung...

HTML:
 <div id=3 style="position:relative;left:0;top:0;width:300px;background-color:#c00000;height:1000">
   <div id=2 style="position:relative;left:100;top:0;width:200px;background-color:#00c000;height:100%">
     <div id=1 style="position:relative;left:100;top:0;width:100px;background-color:#0000c0;height:100%">
     </div>
   </div>
 </div>
Also in der Innere DIV kannste ganz normal reinschreiben. Für die anderen beiden musste wahrscheinlich transparente DIV's mit absoluter Position drüberlegen und in diese den Inhalt reinschreiben...
 
Zuletzt bearbeitet:

Loopo

Admiral
Dabei seit
Juli 2002
Beiträge
7.610
das bringt nichts, weil du ja mit einer fixen Höhe arbeitest (dann müsste man es ja auch nicht mehr verschachteln) :rolleyes:
 

pcw

Lt. Commander
Dabei seit
Juli 2001
Beiträge
1.658
Das war nur ein beispiel, damit ich ned 100 Zeilenumbrüche reinzaubern muss.


Geht genauso, wenn die Höhe durch den inhalt bestimmt wird
 

Nase

Lieutenant
Ersteller dieses Themas
Dabei seit
Jan. 2004
Beiträge
587
Leider funktioniert es nicht wirklich gut. Versuch mal die divs jetzt mit Inhalt, sprich Text, zu füllen.
 

pcw

Lt. Commander
Dabei seit
Juli 2001
Beiträge
1.658
deswegen hatte ich gesagt, dass du über die ersten beiden was drüberlegen musst.

Solang du dafür sorgst, dass das innere DIV immer das größte ist, sollten die drübergelegten DIV's auch ned den Rahmen sprengen...
 

Nase

Lieutenant
Ersteller dieses Themas
Dabei seit
Jan. 2004
Beiträge
587
Dann hätte ich am Ende ja fünf divs, nur dafür, dass die Boxen alle gleich hoch sind. Das gefällt mir überhaupt nicht :(. Werde ich dann wohl doch lieber Tabellen nehmen.
 
Top