Make the Editable Div adaptive size

The editable div is <Div contenteditable = 'true'> </div>. I don't know who has ever encountered this problem. I encountered this problem when I was doing HTML editor last time, you can set a div to a specific size such as width = 300px and Height = 100px. However, when the width and height attributes of a div are set to width = 100%, when Height = 100%, the DIV size is reduced to the text size. If you set the DIV overflow style to scroll, The DIV size remains unchanged during editing, it's really annoying.
 
Fortunately, after a long time, I finally solved this problem. The key to setting width and height to 100% is to refer to the size of its parent container, that is to say, the width and height values must be set for other HTML tags containing the div, if both values are set to 100%, you should ensure that the width and height attributes of the HTML Tag are also set, and so on.

If the DIV is in the outermost layer and you want to fill the entire window with the DIV, you must set the width and height attributes of the body and HTML Tag, as shown below:

Body {} {Widht:100%;Height:100%;}
Html {} {Width:100%;Height:100%;}

Set the width and height attributes of the DIV to 100% to fill the entire window.