Footer go to the bottom of the page

Asked

Viewed 1,248 times

1

My footer has a set height(height: 40px;). When the content of the page itself is small, the remaining area after it is all blank, because of the background, giving a bad aesthetic to the site.

I wish that after the footer, it fills up the rest of the page and it doesn’t turn white.

However when I put height: 100% in <footer>it goes beyond the bottom of the page by creating an unwanted scroll. That is, it increases the total size of the page itself.

The only solution I see is to put background-color: mesmacordofooter; in the body. But I’m thinking this is a bad programming practice.

footer { width: 100%; background: rgb(45,45,47); color: #B8BBC1; display: flex; justify-content: center; font-size: 20px; }

#footercontainer { width: 1000px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 40px; }

<footer> <div id="footercontainer"> </div> </footer>

html css flexbox

  • Put the HTML also.

  • @Edilson the main part of HTML regarding doubt is already in the post. I cannot send all the HTML because it is too much code and it is impossible to put here. I think what I have already posted is enough to understand the problem. In case you need anything, just ask.

  • I mean, that Coles just a sketch, for example the tags that make up this flex, so that we can see if the footer is below or above whom.

2 answers

1

If I understand your question correctly, that’s exactly what I just did in my code. :)

So come on:

Your html should look something like this:

<div class="wrapper">
    <header></header>
    <main>conteúdo do seu site</main>
    <footer></footer>
</div>

And your css like this:

.wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.wrapper main {
flex: 1;
}

That way, whenever your website content is small, your footer will be at the bottom of the browser. And whenever the content is larger than the screen, the footer will follow the content and appear at the end of the scroll.

0

Try this code:

footer {
 width: 100%;
 position: fixed;
 bottom: 0;
 right: 0;
 background: rgb(45,45,47);
 height: 40px;
 display: flex;
}

#footercontainer {
    width: 1000px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

<footer>
  <div id="footercontainer"> 
  </div>
</footer>

  • It didn’t work. I’m working with Flex. I need Flexs and #footercontainer. When the content of the site is large and has scroll, the footer is above it and in the middle of the page.

  • I changed the answer by resetting the references. If Flex is necessary, consider tag the question.

  • It’s still the same. It seems that whenever you use position: Absolute and bottom: 0, it sits on top of the content in the middle of the page, when the content is great. I didn’t know about the tag thing, I’m gonna use it from now on.

  • When I changed the code, I had not read this part of the alignment, only the flex. Now I have corrected and yes, it is the attributes position:fixed;, bottom: 0; and right: 0;

  • There you are using the Fixed. It is fixed at the bottom of the page and accompanies the scrolling of the page always located at the end of it. It’s a reasonable solution but it’s still not what I want.

  • 1

    I noticed that, too. You already have two options: this one I proposed and the one you mentioned in the question (put the color in the background). Without knowing the codes, I think another generic solution will depend on a more complex code (javascript) that detects the footer position and expands it.

Show 1 more comment

Browser other questions tagged html css flexbox

You are not signed in. Login or sign up in order to post.