Pin a footer element to the footer

Asked

Viewed 5,160 times

5

I am doing a job for the college where we were instructed to take advantage of the new semantic tags of HTML5 (Nav, Section, footer, etc). I’m having trouble fixing the footer at the bottom of the page. I’ve tried using CSS and jQuery, but nothing came close to the result.

This is the code from one of the pages:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pizzaria Bolonha</title>
<link href="./css/styles.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-2.1.1.min.js"></script>
<script src="./js/jquery.cycle2.min.js"></script>
</head>
<body>
<nav>
  <ul>
    <li><img src="images/small_logo.png"/></li>
    <li><a href="./home.html">Home</a></li>
    <li><a href="./pizzaria.html">A pizzaria</a></li>
    <li><a href="./horarios_precos.html">Horários e preços</a></li>
    <li><a href="./sabores.html">Sabores</a> </li>
    <li><a href="./bebidas.html">Bebidas</a></li>
    <li><a href="./contato.html" class="last">Contato</a></li>
  </ul>
</nav>
<section>
  <div class="middle"> <br/>
    <center>
      <img src="./images/logo.png"/>
    </center>
    <br/>
    Em um ambiente confortável e aconchegante, a Pizzaria Bologna traz a você os melhores e mais variados sabores da mais deliciosa pizza italiana. Por aqui, priorizamos o atendimento de qualidade, o bem-estar e um sabor único. Nossas pizzas combinam sabores aprovados por pizzaiolos apaixonados com ingredientes selecionados cuidadosamente por uma nutricionista experiente, trazendo uma experiência gastronômica única.</div>
</section>
<footer>Pizzaria Bologna | Avenida Presidente Wenceslau Braz, 1172 - Guaira. Curitiba - PR | (41)3213-5200</footer>
</body>
</html>

And this is the CSS I’m using:

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
html, body {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
    font-family: 'Open Sans', sans-serif;
    background-color: #DDD;
}
h2 {
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 20px;
}
section {
    width: 100%;
    overflow: auto;
    font-size: 16px;
    padding-bottom: 60px;
}
.middle {
    width: 1200px;
    margin: auto;
    text-align: justify;
}
footer {
    clear: both;
    padding-top: 20px;
    background-color: #a20e06;
    width: 100%;
    height: 40px;
    color: white;
    text-align: center;
    font-size: 16px;
    position: relative;
    margin-top: -40px;
}
nav {
    background-color: #06a20e;
    height: 80px;
    width: 100%;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
}
nav a {
    background: transparent;
    color: white;
    display: block;
    font: 20px/80px 'Open Sans';
    padding: 0 25px;
    border-right: solid 1px #07b30f;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
nav a.last {
    border-right: none;
}
nav li:hover a {
    background: #07b30f;
}
iframe {
    width: 100%;
    height: 400px;
    border: 0;
    float: right;
}
#gallery {
    width: 990px;
    margin: auto;
}
#gallery img {
    border: 2px solid white;
    box-shadow: 0 0 5px #333;
    margin: 1px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
#gallery img:hover {
    border: 2px solid #06a20e;
}

What can I do to correct the error and also improve the structure of the site?

jquery html css html5

1 answer

5


This is a common doubt, and I don’t know a "canonical" solution to this (most of the ones I see look more like a gambiarra). A workaround is to place all the content of your page [except the footer] in a div separate and make your minimum size 100%:

HTML

<body>
    <div id="container">
        <nav>
        ...
        </section>
    </div>
    <footer>
        ...

CSS

#container { height: auto; min-height: 100%; }

Source (Soen). Example in jsFiddle. Note: I adjusted the margin-top of footer for -60px to take into account the padding at the top. I don’t know if I did it right, but the result looks ok (the fiddle is a little tight, but extending the window is good).

Here it is the same example with more content on the page. In this case, the footer continues at the bottom of the page, visible only when scrolling down. And needless to say, if what you want is for it to always be visible and underneath, just use position: fixed and leave an extra space on the main content so that you can scroll through to the end without anything getting obscured.

  • Thank you very much, the way you indicated it was perfect!

Browser other questions tagged jquery html css html5

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