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

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 5

Bob_Li
Thanks. Understood now !!

Answer 6

can you post your code?

Answer 7

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 8

pls debug it well not resposive

Answer 9

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 10

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 11

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 12

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

Answer 13

Bob_Li Thank you so much 🙏🏿

Answer 14

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 15

Bob_Li
Hi, Thanks for your code. Learnt many things from it.
I have few questions

(1) What is the difference between place-items center and align-items:center

(2) What display:grid is and what it does in this code? Why did you use it at first place?

Answer 16

Bob_Li
display:grid
place-items:center

Is giving me same output even if i write place-items: right or place-items:left why is that?

Answer 17

Bob_Li
I mean in your code...
Inside the nav{} in css file
Where you've written
"display:grid;
place-items:center;"

If you write place-items:left; or place-items: right; in this code. It's showing same output.
But when you remove the whole place-items and only writer display:grid. It's showing a real messed up code. Why is that?

Answer 18

Afnan Irtesum Chowdhury
It's showing messed up layout when you're writing "align-items:" only without giving it any value.....

Answer 19

Bob_Li Yeah Thank you it works! Tutorial guy was doing the same like setting min-height to a container. Now i understood why!!

Answer 20

Bob_Li
Thank you so much 🙏🏿