html - div scrollbar doesn't work when contenteditable is true -
I'm trying to create something like a Google Docs page, but when I enter some text, scroll bar Does not work
I just want to add some text and be able to scroll with the scroll bar.
Here is the code:
& lt; Html & gt; & Lt; Top & gt; & Lt; Title & gt; & Lt; / Title & gt; & Lt; Style type = "text / css" & gt; Body {margin: 0; Background color: #EEE; Hidden flurry; #contentBox {padding-top: 20px; Padding-bottom: 20px; Background color: #EEE; Width: Auto; Overflow-y: scroll up; } # Text box {width: 60%; Min height: 982px; Range: 1px #c9c9c9 solid; Padding: 12px; Margin-left: 20%; Background-color: #FFFFFF; Outline-style: none; White-space: pre-line; Word-wrap: break-word; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "contentbox" & gt; & Lt; Div id = "textbox" contenteditable = "true" spellcheck = "false" & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;
edit - try second < P> Okay, this can be arranged. I have decided only for you, because it was losing the white background when it overrun with the text.
And I also made one because you said that it should be an "out scroll" and I'm trying to understand what it is.
Original Answer
I recommend that you understand how overflow works before applying < P> This property depends on the height of the parent, and the height of the parent can depend on the height of his grandfather, and so on, so you can be right away. Because of this, sometimes the property may be difficult to debug more than its nested debug.
HTML:
& lt; H1 id = "title" & gt; Scroll out & lt; / H1> & Lt; Div id = "contentbox" & gt; & Lt; Div id = "textbox" contenteditable = "true" spellcheck = "false" & gt; & Lt; / Div & gt; & Lt; / Div & gt; CSS:
html {height: 100%; Body {display: inline; Status: Relative; Margin: 0; Background color: #EEE; Height: 100%; } # Title {text-align: center; #contentBox {background color: # IEEE; Margin-left: 20%; Width: 60%; Height: Calc (100% - 100 px); Overflow-y: scroll up; Overflow-X: Auto; Range: 1px #c9c9c9 solid; } #textbox {width: calc (100% - 24px); Height: Calc (100% - 24px); Padding: 12px; Background-color: #FFFFFF; Outline-style: none; White-space: pre-line; Word-wrap: break-word; }
Comments
Post a Comment