Variable Höhe

[Resi]

Hallo,
meine Seite soll in 3 Div-Blöcken vertikal aufgeteilt werden.
Der obere und der untere hat eine Höhe von 30 px, der mittlere soll den Rest bekommen.

In der Art:

  
<div style="width: 100%; height: 30px;">  
...  
</div>  
<div style="width: 100%; height: 100%;">  
...  
</div>  
<div style="width: 100%; height: 30px;">  
...  
</div>  

Die 100% gehen natürlich nicht, da die 100% von der gesamten Höhe ausgeht. Eine Angabe wie 80% geht auch nicht wirklich, da die Prozent, die die 60px von der gesamten Höhe ausmachen, von der Fenstergröße abhängig ist.
Wie kann ich dies lösen?

[topfblume]

Du meinst horizontal,oder ?

[Resi]

nein schon vertikal:

height: 30px
height: rest
height: 30 px

[suit]

nein schon vertikal:

height: 30px
height: rest
height: 30 px

Mit position: absolute oder fixed ist das kein Problem

top: 30px; bottom: 30px;

Problem solved.

[Resi]

super danke, das wars!

[Gunnar Bittersmann]

@@Resi:

nuqneH

super danke

Nicht dafür.

das wars!

Das war’s nicht.

Qapla'

[Gunnar Bittersmann]

@@suit:

nuqneH

Mit position: absolute oder fixed ist das kein Problem

Doch, das ist es, wenn der Inhalt höher als der Viewport ist.

Da man die Höhe des Viewports nicht kennt, solte man davon ausgehen, das das immer ein Problem ist.

Problem solved.

Mitnichten.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Mit position: absolute oder fixed ist das kein Problem
Doch, das ist es, wenn der Inhalt höher als der Viewport ist.

Der Box mit dem Hauptinhalt sollte man noch 'overflow: auto' mitgeben, dann bekommt sie bei Bedarf einen Scrollbalken zwischen Header und Footer.

Warum aber nicht den Scrollbalken über die ganze Höhe? Sieht besser aus, IMHO.

Dann braucht’s auch keine Extra-Box für den Hauptinhalt. Einfach genügend Platz oben und unten lassen, so dass zu allen Inhalten gescrollt werden kann:

header, footer  
{  
	height: 30px;  
	left: 0;  
	position: fixed;  
	right: 0;  
}  
  
header  
{  
	top: 0;  
}  
  
footer  
{  
	bottom: 0;  
}  
  
body  
{  
	padding-bottom: 30px;  
	padding-top: 30px;  
}

Qapla'

[suit]

Mit position: absolute oder fixed ist das kein Problem

Doch, das ist es, wenn der Inhalt höher als der Viewport ist.

Die overflow-Eigenschaft ist dir aber ein Begriff?

html/body um seinen overflow "bestehlen" und ein overflow: auto auf das entsprechende Element.

Solved :p

[Gunnar Bittersmann]

@@suit:

nuqneH

Die overflow-Eigenschaft ist dir aber ein Begriff?

Ähm, ja.

html/body um seinen overflow "bestehlen" und ein overflow: auto auf das entsprechende Element.

Sag das doch gleich!

Solved :p

Naja, ich finde die Lösung mit Scrollbalken über die gesamte Höhe dann doch besser.

Qapla'

[Gunnar Bittersmann]

@@Resi:

nuqneH

meine Seite soll in 3 Div-Blöcken vertikal aufgeteilt werden.
Der obere und der untere […]

Ist die obere Box vielleicht ein 'header' und die untere ein 'footer'?

Qapla'