In diesem Beispiel folgt die Art der Größenangabe für die Höhe des "Content"-Bereichs den Größenangaben des Objektes. Umschaltbar zwischen "fit" und "auto"

Beispiel:

Script:

	blindText="Lorem ... tellus."

	app.newClass("toggle","movedock",function(param,app,superClass){
			
			this.classType="toggle";
			this.nonPrototype=function(param,$class$){
				return {
						size:{height:"fit",scroll:true}
						,sizes:{content:{sizeHeight:false}}
						}
				}
			this.bodyOpenHTML=function(param,$class$){
				return [
					{tagOpen:"div",$id$:"toggleHeight"}
						,{tagName:"button",$id$:"setSize",children:"toggle height ("+this.size.height+")",click:$this$.toggleHeight}
					,{tagClose:"div"}
				]
			}

			this.toggleHeight=function(param,$class$)
			{
				this.size.height=(this.size.height=="auto")?"fit":"auto";
				getElement.call(this,"setSize").innerHTML="toggle height ("+this.size.height+")"
				this.content.applySize.call(this)
			}
		})
		
		app.newClass("div","",function(param,app,superClass){
			
			this.classType="div"
			this.nonPrototype=function(param,$class$){
				return{
						sizes:{
							div:{sizeHeight:true,width:"fit",scroll:true}
						}
				}
			}
			
			this.contentOpenHTML=function(param,$class$){
				return [
					{tagName:"div",$id$:"div",style:"height:auto;",children:["<SPAN>"+blindText+"</SPAN>"]}
				]
			}
			
			this.setContent=function(str)
			{
				getElement.call(this,"div").innerHTML=str
				this.content.applySize.call(this)
			}
		})
		
		app.newObject("toggle.div.div.div")

CSS:

.app-div{
	border:1px solid #CCCCCC;
	padding:5px;
	margin:5px;
	float:left;
	overflow:auto;
	text-align:justify;
}