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

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. having it scroll out of sight is inconvenient.

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 also modified your logo css so that it's a circle.

sticky could work, but it's more difficult to implement so that it doesn't become a distraction when it scrolls up and sticks to the middle of the page.

perhaps it's not what you want. if so, maybe add some more details to your example code.

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

Answer 2

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 3

Manav Roy , Afnan Irtesum Chowdhury
yes, i can see why it's confusing. since nav have only one direct child (ul) and it's margin is auto, it seems to be overriding the place-item property.

you can delete the ul's margin:auto or set it to 0. then it will work as expected . by the way, the values for place-item are start|center|end|stretch|normal|legacy....

https://developer.mozilla.org/en-US/docs/Web/CSS/place-items

here is a working example

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

Answer 4

Ah, I see what you're trying to do! The issue is that position: sticky doesn't stick to the viewport bottom — it only sticks within its parent container while scrolling. So if the parent doesn't have enough height or scrolling, it won’t behave the way you expect.

If you want that red background to stay at the bottom of the screen no matter what, try using position: fixed with bottom: 0 instead. That’ll anchor it to the bottom of the viewport directly.

Hope that helps!

Answer 5

display:grid is another very useful display layout system.

display:grid;
place-items:center;

this combination is an easy way to put items horizontally and vertically centered in divs.

Think of it as a 2d display, with rows AND columns of items, while display:flex is a 1d display, being able to display just either row OR column of items, depending on flex-direction.

https://www.w3schools.com/css/css_grid.asp

Answer 6

Bob_Li
Thanks. Understood now !!

Answer 7

can you post your code?

Answer 8

Manav Roy In Bob_Li's code removing the place-items property doesn't bring any change either, neither does using left or right as its value. I don't see any "messed up" layout after removing it.

Answer 9

pls debug it well not resposive

Answer 10

Bob_Li
Hii could you please check my original code no matter what I do the background with bottom class is not going downwards with postion: sticky; EVEN after setting height to 200vh(To make it long enough for sticky; but it's still not working)

Answer 11

Manav Roy
.cont{
height:100%;
}

sticky will not snap to bottom: 0

it will position itself relative to the elements before it, so it is positioned relative to .cont, but because you did not give it any height, .cont is at minimal height. the bottom class will not touch bottom:0.

sticky means it will not go beyond the set point once it reaches it. it sticks.

so to make it stick to bottom:0, the divs before .bottom must expand vertically as much as possible. so you need to set .cont height:100%
this will push your bottom class to contact bottom:0

Answer 12

Manav Roy

put your link to the icon's stylesheet at the header. this way there's no need to wait for the body to be loaded to get the icons.

i modified your code to better make use of the sticky property. here it is to make sure the controls are always accessible when the page is scrolled down while adding an interesting effect when scrolled up.

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

Answer 13

I wasn't aware there is "sticky" value to position lol

Answer 14

Bob_Li Thank you so much 🙏🏿

Answer 15

Hey! I checked your code — the issue is that position: sticky only works when the element has a scrollable parent, and it's based on the scroll position within that container. If the parent isn’t tall enough to scroll, sticky won’t behave the way you expect.

If you want the red background to stick to the bottom of the screen, try using position: fixed; bottom: 0; instead. That will pin it to the bottom regardless of scroll.

Let me know if you want it inside a container rather than on the viewport, and I can suggest a workaround for that too. Happy coding! 🚀

Answer 16

Initially you had 2 div classes named: "bottom", line 23 & line 26 to be exact
I renamed the first div class (line 23) to red-background & applied css styles to this renamed div class...

As far as CSS is concerned:
1. Use position: fixed for elements that should always stick to the bottom of the viewport.
2. Use position: sticky for elements that should stick within a scrolling container.
3. Always check the parent container’s CSS: overflow, height, and position.

Have a look at the updated code & share your thoughts...
Anywho...
Hope this helps...

Answer 17

William Gram
Hi, Problem solved actually...
https://sololearn.com/compiler-playground/W2E5bF7iFB4v/?ref=app

Answer 18

Bob_Li Oh damn. Sololearn also has bots!! Suprising..

Answer 19

it's my favorite pastime here, spot the bot...

it usually adds a link to a spam site later on when it edits the reply ... until then, the mods can't really do anything, since there is the benefit of the doubt.

Answer 20

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