Footer go to the bottom of the page

Question

Footer go to the bottom of the page

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

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

I wanted the footer after the footer to fill up the rest of the page and not go blank.

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

The only solution I see is to set background-color: mesmacordofooter; to body . But I'm finding this to be 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

asked by anonymous 24.03.2017 / 19:20

2 answers

Create intent for drawer layout buttons, drawer button, clicking looks like text only Is there a problem in the existence of duplicate CSS, but 100% the same?

score 1 · Answer 1

If I understood your question well, that's exactly what I just did in my code. :)

So let's go:

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 site content is small, your footer will stay at the bottom of the browser. And whenever the content is larger than the screen, the footer will accompany the content and appear at the end of the scroll.

score 0 · Answer 2

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>