Reputation: 145

How to put the Footer on the end of the page?

I don't want it to be fixed on the bottom, i just want it to be at the end even if the page has no content.

As you can see... the problem is it:

i searched on google about it, and i tried to put some CSS like:

footer {
    bottom: 0;
    position: absolute;
    width: 100%;
}

But it don't worked.

<!-- Footer -->
<footer class="page-footer font-small teal pt-4 bgFooter rodape">

    <!-- Footer Text -->
    <div class="container-fluid text-center text-md-left">

      <!-- Grid row -->
        <div class="row">

        <!-- Grid column -->
            <div class="col-md-12 text-center mt-md-0 mt-3 text-light" style="font-family: 'Quicksand', sans-serif;">

              <!-- Content -->
                <h5 class="text-uppercase pb-3">Social</h5>

                <div class="mb-4">

                    <a class="btn btn-outline-danger pl-3 pr-3" href="" target="_blank"><i class="fab fa-facebook-f"></i></a>

                    <a class="btn btn-outline-danger ml-3 mr-3" href="" target="_blank"><i class="fab fa-twitter"></i></a>

                    <a class="btn btn-outline-danger" href="" target="_blank"><i class="fab fa-instagram"></i></a>

                </div>

            </div>

        </div>
      <!-- Grid row -->

    </div>
    <!-- Footer Text -->

    <!-- Copyright -->
    <div class="footer-copyright text-center text-light small ml-2 py-3" style="font-family: 'Quicksand', sans-serif;">© 2018 Teste |
        <a href="?p=privacidade" class="linkPolitica" style="font-family: 'Quicksand', sans-serif;"> Política de privacidade</a>
    </div>
    <!-- Copyright -->

</footer>
  <!-- Footer -->

Upvotes: 1

Answers (5)

Mitchel Jager

Reputation: 445

There's several methods to do this. Let's start with the most straight forward method.

If your footer height is set (Will not change, regardless of browser width or footer content) you can use a negative margin on the footer.

Let's take this html structure as an example:

<body>
  <div class="container">
    <div class="content"></div>
    <div class="footer"></div>
  </div>
</body>


html,
body {
 height: 100%; // First we set the height to make sure the body is always atleast big enough
}

.container {
  min-height: 100%; // The container will always be 100% height at minimum;
}

.content {
  padding-bottom: 100px; // This is set to the footer height
}

.footer {
  height: 100px; // The footer has a set width
  margin-bottom: -100px; // We move the footer in the negative space that was created by the padding
}

Recommended:

It get's a little more difficult when the footer height is not set. This will most likely be the case, since your website might be responsive.

In this case we will be using flexbox.

    html, 
    body {
      height: 100%;
      margin: 0;
    }
    
    .container{
      display: flex; 
      flex-direction: column; 
      height: 100vh;
    }
    
    .content {
      background: gray;
      flex: 1 0 auto; 
    }
    
    .footer {
      background: blue;
      height: 30px;
      flex-shrink: 0; 
    }

<div class="container">
  <div class="content"></div>
  <div class="footer"></div>
</div>

We set the container to flex. Child divs in a flex container "grow" to fill their parent. We set flex to column to display them under eachother rather than next to eachtother. This container is set to 100vh. vh stands for "Viewport height", or the height of the window. The content is set to flex: 1 0 auto. This will allow it to grow 1, but not shrink 0, while allowing it's size to be auto

The footer is to not ever shrink flex-shrink: 0, regardless of the size of other content.

You can also take a look at css grid. However since I assume you are somewhat new to this, I recommend sticking with flex for now! Flexbox is wonderful once you realise what it can do.

Upvotes: 3

Jagjeet Singh

Reputation: 1572

You can do like following using the position: absolute;

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

OR Simple method is to make the body 100% of your page, with a min-height of 100%. This works fine if the height of your footer does not change.

Give the footer a negative margin-top:

#footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}

Upvotes: 0

Luís P. A.

Reputation: 9739

Try using css grid, check this example:

HTML

<header>
</header>
<main>
</main>
<footer>
</footer>

CSS

html, body {
  width: 100%;
  height: 100%;
 margin:0;
 padding:0;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
}

header {
  background: red;
}

main {
  background: grey;
}

footer {
  background: purple;
}

DEMO HERE

Upvotes: 0

Omid Nikrah

Reputation: 2482

You just need to set min-height: 100% for html and body like the following:

html, body {
    min-height: 100%;
}

Upvotes: 0

BDeliers

Reputation: 84

I don't have your code, but a good solution is first to set your body min's height to 100% of the page. Then you set your header to x%, your footer to y% and your page's content min height to 100-(x+y)%.
Example code :

HTML :

<body>
    <header>
    </header>

    <main>
    </main>

    <footer>
    </footer>
</body>

CSS:

html {
    min-height: 100%;
}
body {
    display: inline-block;
    min-height: 100%;
}
header {
    height: 10%;
    display: inline-block;
}
footer {
    height: 10%;
    display: inline-block;
}
main {
    min-height: 80%; 
    display: inline-block;
}

Hope it helps ;)

Upvotes: 0

How to put the Footer on the end of the page?

Answers (5)

Related Questions