How to keep a footer at the bottom of every page on my website?

Question

So I have this footer that I want to position at the bottom of every page of my website. I tried using absolute and fixed position but didn't work. Here's what I have:

<footer class="footer">
    <div id="ft">
    <div class="container">
        <div class="footer-grids">
            <div class="col-md-3 footer-grid">
                <h3>Анкети</h3>
                <ul>
                    <li><a href="{{ url('https://docs.google.com/forms/d/1fpkJ1ndBO4YmyAk2UEfFYcR7m0HvAG-xH-dbolGtyE0/viewform') }}" 
                    target="new">Анкета – нашият екологичен отпечатък</a></li>
                    <li><a href=" {{ url('https://docs.google.com/forms/d/1wuH3PC8Bl4YqZUwv_bYRMUC6QpV_JoZJnhDIEd3HtQk/viewform') }}" 
                    target="new">Анкета с цел проучване обучението по чужд език.</a></li>
                </ul>
            </div>
            <div class="col-md-3 footer-grid">
                <h3>ДЗИ и НВО</h3>
                <ul>
                    <li><a href="{{ url('http://www.mon.bg/?') }}" target="new">18.05.2016 г. – ДЗИ по БЕЛ и НВО в VII клас 
                    по БЕЛ</a></li>
                    <li><a href="{{ url('http://www.mon.bg/?') }}" target="new">20.05.2016 г. – Втори ДЗИ и НВО в VII клас 
                    по математика</a></li>
                </ul>
            </div>
            <div class="col-md-3 footer-grid">
                <h3>Други</h3>
                <ul>
                    <li><a href="students#stipendii">Отпускане на стипендии</a></li>
                    <li><a href="{{ url('pdf/grafik_vakancii.pdf') }}" target="new">График на ваканциите и неучебните 
                    дни за 2015/2016г.</a></li>
                </ul>
            </div>
            <div class="col-md-3 footer-grid">
                <h3>Други</h3>
                <ul>
                    <li><a href="#">PRESENTATIONS</a></li>
                    <li><a href="#">SEMINARS</a></li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>

    </div>
    </div>

</footer>

and there's the css:

.footer{
position: absolute;
bottom: 0;
width: 100%;
background:#393939;
}
#ft{
    margin: 16px 0 0 5px;
    color: rgb(249, 249, 184);
    text-decoration: none;
}
#ft:hover{
    text-decoration: none;
}

.footer-grid ul{
padding:0;
margin:0;
}
.footer-grid ul li{
  background: url(../images/arrow.png) no-repeat 0px 6px;
  list-style-type: none;
  display: block;
  padding-left: 23px;
  line-height: 2em;
}
.footer-grid ul li a{
  color: #757575;
  font-size: 14px;
  font-weight: 600;
}
.footer-grid ul li a:hover{
padding-left: 11px;
color:rgb(240, 226, 134);
}
.footer p {
margin:44px 0 0 0;
font-size:14px;
color: #c2c2c2;
font-weight: 600;
text-align:center;
}
.footer p a{
color:#fc3a3a;
}
.footer p a:hover{
color: #c2c2c2;
}
.footer-grid h3{
  margin: 0 0 20px 0;
  font-size: 25px;
  font-family: Comfortaa;
  color: rgb(240, 226, 134);
}

I've been trying to fix this for quite some time now and I would appreciate it if someone could give me a hand with it :)

Do you want it to appear overtop content that extends beyond the bottom of the page, or do you want it to be anchored to the bottom of the page when the content is short? — zzzzBov, May 11 '16 at 17:13
I want it to be position in the bottom of every page. But my pages are not short and have scroll so that's where the problem comes in. — Stanislava Yaneva, May 11 '16 at 17:18
From your description it sounds like you're asking a duplicate question to http://stackoverflow.com/q/12239166/497418, but please correct me if I'm wrong and misunderstanding what you're after. — zzzzBov, May 11 '16 at 17:32

score 0 · Answer 1 · answered May 11 '16 at 17:03

0

Everything works fine in your CSS, just change

.footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    background:#393939;
}

to

.footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    background:#393939;
}

answered May 11 '16 at 17:03

Andrew Donovan

552
2
14

But this way it will appear all the time but I just want it to be sticky in the bottom of the page – Stanislava Yaneva May 11 '16 at 17:16
If you simply insert the html at the end it will have your desired result. If you wish to have it stick to bottom on short pages and not sticky on scroll pages, thats another thing. – Andrew Donovan May 11 '16 at 17:22

score 0 · Answer 2 · answered May 11 '16 at 17:26

0

Mhmm... I think you are using bootstrap right ? If so, try to make your footer as a "nav bar" and fix it to the bottom with this:

<nav class="navbar navbar-inverse navbar-fixed-bottom">
    <YOUR FOOTER>
</nav>

Maybe this is not to best approach.

answered May 11 '16 at 17:26

Marc Giroux

186
1
7
18

How to keep a footer at the bottom of every page on my website?

2 Answers2