让可编辑的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%就可以让它占满整个窗口啦。

转载于:https://www.cnblogs.com/haohello/archive/2007/04/23/724344.html