How to Add a footer to the first project?

Development
1

HI,
I have tried adding a footer to the first project, but the position seems to be going to the top. I tried the position:absolute;
top:78;
but it didn’t work and I also see changes to the nav tag at the header whenever I try to add a footer and change the position.

Pls help me out.

2

Hi @esherman2020 ,

Please share screenshots of your code. This will help us understand the issue better.

3

The issue in your approach might be related to the usage of ‘absolute.’ What absolute does is, it positions the element relative to its nearest positioned ancestor. If there’s no such ancestor, which might be what’s happening in your case, it positions itself relative to the document’s root. That could be the reason you’re getting it at the top.

The most commonly used practice for positioning a footer using CSS is to use flex-box. Here’s a sample code segment illustrating it:

HTML code:

Content
Footer

CSS code:
.body, html {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}

Here, the flex : 1 on the .content pushes the footer to the bottom when there is little content.

4

This is a common problem faced when putting a footer for a website.
If the website has less content then footer does not align to bottom of the page .
So we can actually use sticky footer for making the position of the footer fixed to bottom
like the below code
.footer {position: fixed; bottom: 0; width: 100%; padding: 10px;
Try exploring this website for example https://inventrom.com/
If we inspect this website we see that the footer div used does not need postion:sticky since the content in the website is enough for the footer to remain on the bottom of the website.
I hope this would help others also.