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..

Answer 3

maybe this?

use 100% if you want to occupy the entire width or height . it's more flexible than hardcoding in px.

i also used position:fixed for nav.

i intentionally made the body height 200vh so that scrolling could be tested. i put some placeholder divs so that there's something to see.

i modified your logo css so that it stays circular.

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