How to make footer attach to bottom of the screen

Asked Jun 25 '22 at 16:52

Active Jun 26 '22 at 04:47

Viewed 24 times

Attached is the image of my webpage. How to make this footer attach to bottom of screen rather than being displayed immediate after publish button?

I have written this code for footer:

.footer{
  display:flex;
  justify-content: center;
  background-color: #1abc9c;
  align-items: center;
  height:60px;
}

I know I could use "position:fixed" and "bottom:0" but that way footer will stick to bottom of screen each time I scroll. But I don't want that the footer should stick to bottom. I don't want that each time I scroll footer is seen at bottom. It shood just remain at the bottom of the web page.

edited Jun 26 '22 at 04:47

asked Jun 25 '22 at 16:52

Siddhant Agarwal

are you tried to use `position` css property? https://developer.mozilla.org/en-US/docs/Web/CSS/position – Laaouatni Anas Jun 25 '22 at 17:02
1

just add `position: fixed` and `bottom: 0` in your css selector for the `
` (and also `width: 100%` if it give you problems)
– Laaouatni Anas Jun 25 '22 at 17:07
But I don't want to that the footer should stick to bottom. I don't want that each time I scroll footer is seen at bottom. – Siddhant Agarwal Jun 26 '22 at 04:42
if so you can use some other position like `sticky` for example https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers – Laaouatni Anas Jun 26 '22 at 11:50

How to make footer attach to bottom of the screen

0 Answers0