I want to add two Div in the page, one Div for the top part, which is ready-only, the other one Div for the lower part, which is editable. What I want to achieve is:
- Make the lower Div editable and scrollable if content is too long.
- While scrolling the lower Div, the top Div should stay at the same position
Here is the code I have:
<html>
<body>
<div>
<div>Top Part</div>
<div contenteditable="true">Click here to type</div>
</div>
</body>
</html>
In the code above, if I click on the lower Div, we can then type, then if we keep pressing Enter, it will show the vertical scroll bar, but if I scroll, the top Div will be scrolled up too, which I want to avoid.
So, how can I make the scroll bar only applied to the lower Div?