Größe eines inneren Elements anpassen/füllen

[bubble]

Hi,

ich verzweifle schon wieder an einer Kleinigkeit.

Und zwar habe ich folgende Struktur von HTML-Elementen

<div class="GUI_window">  
	<span class="GUI_window_title">Titel</span>  
	<div class="GUI_window_title_buttons GUI_window_title_button_close"></div>  
	<div class="GUI_window_content">  
		<!-- irgendein Inhalt -->  
	</div>  
	<div class="GUI_window_resizer"></div>  
</div>

Via CSS Eigenschaft float liegen GUI_window_title und GUI_window_title_buttons nebeneinander und haben eine über CSS definierte feste Höhe. GUI_window_content hat keine feste Höhe und liegt unter title/buttons, unter content ist GUI_window_resizer, wiederum mit einer festen Höhe, aber auch mit relativer Positionierung.

So, GUI_window bekommt nun aber eine bestimmte Höhe. Wenn nun diese Höhe größer als die benötigte Höhe ist, ist Leerraum nach resizer. Nun möchte ich aber, dass content soweit vergrößert "wird", dass es den Leerraum "verbraucht" und alles bündig ist. (Hintergrund ist, das content einen Rahmen hat und resizer die rechte untere Ecke überdecken soll)

Geht das mit CSS? Auf Javascript würde ich gerne verzichten.

Hier mal eine Testseite, die das komplette Problem darstellt.

MfG
bubble

[dave]

Hi,

Geht das mit CSS?

Ja.

.GUI_window_content {  
  min-height: -webkit-calc(100% - 28px);  
  min-height:    -moz-calc(100% - 28px);  
  min-height:      -o-calc(100% - 28px);  
  min-height:         calc(100% - 28px);  
}

Auf Javascript würde ich gerne verzichten.

Warum eigentlich? Wird das Fenster ohne JS überhaupt dargestellt?

Hier mal eine Testseite, die das komplette Problem darstellt.

Du hast keinen Doctype angegeben.
Warum verwendest du nur -moz- als Vendorprefix und nicht auch -webkit- und -o-?

Quellcode könntest du übrigens auch direkt hier im Forum posten.

Alternativ zum resizing via Javascript könntest du übrigens auch resize: both; verwenden können. Beachte das "Applies to:".

~dave

[bubble]

Hi,

Geht das mit CSS?

Ja.

.GUI_window_content {

min-height: -webkit-calc(100% - 28px);
  min-height:    -moz-calc(100% - 28px);
  min-height:      -o-calc(100% - 28px);
  min-height:         calc(100% - 28px);
}

  
Klappt wunderbar :) Wusste nicht, dass solche Berechnungen möglich sind.  
  

> > Auf Javascript würde ich gerne verzichten.  
>   
> Warum eigentlich? Wird das Fenster ohne JS überhaupt dargestellt?  

Naja Fenster nicht, wollte allerdings diese Anpassung für andere Panels nehmen die ich noch implementieren werde.  
  
Desweiteren gehört das meinem Verständnis nach eher ins Layout.  
  

> > [Hier](http://pastebin.com/gBj0LM5f) mal eine Testseite, die das komplette Problem darstellt.  
>   
> Du hast keinen Doctype angegeben.  

Hab ich noch rausgelassen, weil ich mich da noch mal genau belesen will.  
  

> Warum verwendest du nur -moz- als Vendorprefix und nicht auch -webkit- und -o-?  

Da ich selbst ausschließlich Firefox verwende um zu testen, hab ich mir für die Testseite die Schreibarbeit ersparrt (-o- kannte ich zum Beispiel noch garnicht), hätte ich für den Post hier eigentlich dazu schreiben, aber vergessen >.<  
  

> Quellcode könntest du übrigens auch direkt hier im Forum posten.  

Ich mags persönlich nicht so, Forumbeträge mit Quelltexten zu fluten. Da ich allerdings nicht wusste, ob das vorher Beschriebene ausreichend ist, wollt ichs halt trotzdem mit im Post haben.  
  

> Alternativ zum resizing via Javascript könntest du übrigens auch [resize: both;](http://www.w3.org/TR/css3-ui/#resize) verwenden können. Beachte das "Applies to:".  

Werd ich mir die Nacht noch gründlich anschauen, klingt interessant für mich, danke :)  
  
Alles in allem Danke für die Antwort :D  
  
MfG  
bubble

[dave]

Hi,

Auf Javascript würde ich gerne verzichten.

Warum eigentlich? Wird das Fenster ohne JS überhaupt dargestellt?
Desweiteren gehört das meinem Verständnis nach eher ins Layout.

Das ist absolute richtig, ich finde meine Frage dämlich.

~dave

[Gunnar Bittersmann]

@@dave:

nuqneH

Geht das mit CSS?
Ja.
  min-height:      -o-calc(100% - 28px);

Nein, nicht in Opera.

Warum verwendest du nur -moz- als Vendorprefix und nicht auch -webkit- und -o-?

Und nicht auch die präfixfreie Eigenschaft?

Und wenn du die Frage so allgemein stellst, warum vergisst du dann -ms-?

Bei box-sizing sind außer -moz- keine Präfixe nötig.

Qapla'

[bubble]

@@dave:

nuqneH

Geht das mit CSS?
Ja.
  min-height:      -o-calc(100% - 28px);

Nein, nicht in Opera.

Gibt es eine alternative für Opera?

MfG
bubble