I tried doing a CSS only solution and was able to get it to work on everything but IE, but wanted a common solution so ended up going with javascript.
This script is using the mootools js framework, but should be easy to follow and recreate in whatever you are using. It also takes in consideration other objects above the editor in the container. So, if you have a tabs or something like we have in our container it will properly resize around those.
eName - Editor instance name/ID
cName - ID of the container element
This script is using the mootools js framework, but should be easy to follow and recreate in whatever you are using. It also takes in consideration other objects above the editor in the container. So, if you have a tabs or something like we have in our container it will properly resize around those.
eName - Editor instance name/ID
cName - ID of the container element
function autoResize(eName,cName){ // editor top object (span) var eObj=$('cke_' + eName); // editor workarea frame (td around the iframe) object var wObj=$('cke_contents_' + eName); // container object var cObj=$(cName); // get the y position relative to container object var eTop=eObj.getPosition(cObj).y; // figure out how much space we have to play with var cHeight=cObj.getSize().y-eTop; // find out the height of the editor var eHeight=eObj.getSize().y; // give or take away the difference between container and editor height wObj.setStyle('height', wObj.getSize().y + cHeight - eHeight); }