Variable Breite und Höhe von Elementen

[Roadster]

Hallo Roadster

Hallo Jürgen

css kann rechnen: http://wiki.selfhtml.org/wiki/Calc#Berechnungen_-_Die_calc-Funktion

CSS vielleicht, aber ich wohl nicht! ;)

header {  
  
  position: relative;  
  margin: 0 auto 0;  
  width: 90%;  
  min-width: 800px;  
  height: 200px;  
  
}

Die Kombination von width: 90%; und min-width: 800px; funktioniert tadellos, genauso wie es sein soll. Auch kann ich auf der X-Achse ohne weiteres Angaben wie width: calc( 100% - 200px ); und min-width: 500px; machen und es wird genauso umgesetzt...

Aber wenn ich mich dann an die Höhenangabe der Elemente <main> und <section> mache, funktioniert das selbe Prinzip eben überhaupt nicht!

main {  
  
  position: relative;  
  margin: 15px auto 15px;  
  width: 90%;  
  min-width: 800px;  
  height: calc( 100% - 230px );   /* ...oder jede beliebige Prozentangabe... */  
  min-height: 500px;  
  
}  
  
#tools {  
  
  position: relative;  
  float: left;  
  width: 200px;  
  height: inherit;  
  min-height: inherit;  
  
}

Völlig egal, ob ich hier bei height einfach eine Prozentangabe mache oder ob ich noch ein paar Pixel davon abziehe, das Element <main> oder auch <section> haben immer nur die min-height, - und wenn ich die wegnehme, sind sie flat...

Eine dynamische Anpassung über Prozentangaben findet also nur auf der X-Achse statt, nicht jedoch auf der Y-Achse, und die Frage ist, warum das selbe Prinzip einmal funktioniert und einmal nicht! ;)

Gruß,

Roadster.