Resizable div container attached to bottom in html. | SoloLearn: Learn to code for FREE!


Resizable div container attached to bottom in html.

I want to create a div that is sticky to the bottom and can appear when clicking the button that has height depending on the amount of text on the textarea. For example: Same like on sololearn non-html playground. When you type code on the editor and press "run", a window appears on the bottom that can be pulled up to resize and dismissed by pulling down. I wanted to make similar to that one. See my code and help me..

9/29/2020 7:51:59 AM

Bibek Oli

7 Answers

New Answer


#shown{ display:none; position: fixed; bottom: 0; width:100%; background:teal; color:white; bottom:0; }


Bibek Oli to make work out the left , top, right, bottom You need to include 'Position' Such as position: absolute Position: relative Position:fixed


Maybe u have used placeholder for "some text"


For sticky you can use Position:sticky; With bottom and left property to set position. For resizable content area use can use a div with contenteditable:true; and css property resize Resize property allow you to resize the element horizontally,vertically or both.


You have to just drag the bottom right coner of element to resize it. I have android and it's working well can check in my code. I don't know wheather it works perfectly or not on desktop.u can try it there


Divya Mohan Will I be able to resize it from phone or only PC?


Check this code