What's wrong in my code?

Question

https://sololearn.com/compiler-playground/W3PlK7AOGe5z/?ref=app

I want that red background to go in bottom. But despite writing position:sticky; and bottom:0; it's not going at bottom. Why?

Answer 1

Sticky only makes the element stick at bottom when you scroll. But currently your page's other elements aren't big enough to make the page scrollable. Use position: fixed instead.

Answer 2

Afnan Irtesum Chowdhury
Done that..but why width is too less? Even after setting it to width:200px;(Which usually takes up whole document flow). Width:200px; in this case is covering only half of maximum screen width....

And is there any way to make it work by postion:sticky; as I'll be applying many features which may result in bigger page..