让可编辑的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属性,如下所示:
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
这时将该div的width和height属性设置为100%就可以让它占满整个窗口啦。
![](https://www.cnblogs.com/CuteSoft_Client/CuteEditor/images/emsmilep.gif)