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.