让可编辑的div可以自适应大小



可编辑的div也就是<div contenteditable='true'> </div>不知道你们谁遇到过没有,我上次在做Html Editor时就遇到了这样的问题,可以将div设置为某一具体大小如width=300px、height=100px之类,但当div的width和height属性设为width=100%,height=100%时div的大小就会缩小到文本的大小,如果再将div的overflow样式设为scroll则在编辑时div的大小根本就没有变化,真是让人懊恼不已。
 
 还好费了好半天的功夫终于把这个问题给解决了,原来width和height等设置为100%关键是参考其父容器的大小,也就是说包含该div的其他html标签必须得设置width和height值,如果这两个值都设为100%那么就应该保证该html标签的width和height的width和height属性也被设置,依此类推。

如果该div是在最外层的话且想让div占满整个窗口,那就得设置body和html标签的width和height属性,如下所示:
  
body{widht:100%;height:100%;}
html
{width:100%;height:100%;}

这时将该div的width和height属性设置为100%就可以让它占满整个窗口啦。
posted @ 2007-04-23 21:07  haohello  阅读(1899)  评论(0编辑  收藏  举报