4

I am trying to get the footer to stick to the bottom of the page. If the content is small, the footer should be on the bottom of the browser. The space between content and footer should be empty.

I have tried various methods, but the footer remains directly under the content, and not at the bottom of the browser.

Here is my code

<div id="content">        
    <a href="item.html">
        <div class="col-xs-12 col-md-6 col-lg-3 item">
            <div class="opacity"></div>
            <div class="box_bg">
                <h4 class="color1">Headline</h4>
                <p>Description</p>                    
            </div>
        </div>
    </a>
    <a href="item.html">
        <div class="col-xs-12 col-md-6 col-lg-3 item">
            <div class="opacity"></div>
            <div class="box_bg">
                <h4 class="color1">Headline</h4>
                <p>Description</p> 
            </div>
        </div>
    </a>
</div>
<footer class="bar bar-tab">        
    <a class="tab-item" href="#">
        Home
    </a>  
</footer>

CSS:

#content{
    min-height: 100%;
}
footer{
    height: 50px;
    position: relative;
    bottom: 0;
}
Monah
  • 6,714
  • 6
  • 22
  • 52
Archer
  • 1,062
  • 1
  • 13
  • 32

5 Answers5

6

If I understand what you want, you need to make your footer position: fixed; and add padding-bottom to your container.

The body will sit behind the footer, therefore you need padding that is slightly larger than the height of the footer.

https://jsfiddle.net/c0Lrcg4s/

#content{
    min-height: 100%;
    padding-bottom:60px;
}
footer{
    height: 50px;
    position: fixed;
    bottom: 0;
}

You could use position: absolute; However, this isn't going to work properly footer as its relative container will be the viewport and will then scroll with the screen.

Tom
  • 2,543
  • 3
  • 21
  • 42
1

Try changing your css to for the footer to be absolute positioned:

footer{
    height: 50px;
    position: relative;
    bottom: 0
}

Codepen demo: http://codepen.io/anon/pen/NRxQQP

B L
  • 11
  • 2
1

You can do this with jQuery, because you need height of your 'window'. In jQuery you can write:

var height = $(window).height();
$("#content-wrapper").css({height : height});

Of course, you can reduce the height for height of footer and header so you'll see the footer when you open the page.

Best way to get this height variable is inside .resize() fincton.

Then in css you can set:

#content-wrapper{
position:relative;
}
.footer{
position: absolute;
bottom: 0;
}

.footer and #content should be inside #content-wrapper

Vladimir Bauer
  • 9
  • 3
1

if you set the position of the footer to fixed it will stay at the same location where fix it with the top and left attributes.

footer{
    height: 50px;
    **position: fixed;**
    bottom: 0;
}
Wissam HANNA
  • 63
  • 14
0

Here's my solution (JSFiddle):

<!DOCTYPE html>
<html>
<head>
<title>Sticky footer example</title>
<meta name="viewport" content="width=device-width, initial-scale=.75,user-scalable=yes">
<meta charset="UTF-8">
<style>
HTML {
    min-height:100%;
    margin:0
}
BODY {
    position:relative;
    min-height:calc(100vh - 125px);
    margin:0;
    padding:0 0 125px;
    background-color:lightyellow;
    }
.highbar {
    position:relative;
    min-height:calc(100vh - 125px);
    max-width:600px;
    background-color:cyan;
    margin:0 auto;
    }
.lowbar {
    position:absolute;
    height:125px;
    bottom:0;
    width:100%;
    background-color:#345995;
    color:white;
    }
</style>
</head>

<body>
<div class="highbar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat vulputate commodo. Aenean venenatis posuere mi id laoreet. Proin pretium dolor vulputate, efficitur eros congue, iaculis mi. Suspendisse dignissim neque in dapibus dignissim. Donec elementum erat rhoncus neque blandit maximus. Nulla facilisi. Ut arcu mi, fringilla ac nisi et, egestas porta est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
<br><br>
Duis iaculis dui id mi dictum, vel lobortis velit fermentum. Nulla est arcu, pellentesque ac risus vitae, iaculis consequat enim. Vivamus condimentum, ex sit amet sagittis tempus, ex sapien interdum magna, et luctus ante dolor quis erat. Fusce et lorem eget nibh mattis pharetra. Mauris in faucibus lectus, hendrerit sagittis nisi. Donec scelerisque consequat dolor in pharetra. Sed in velit erat.
<br><br>
Aenean eget enim nec eros scelerisque tempor cursus sit amet urna. Praesent dignissim neque id posuere fermentum. Duis varius enim non leo ultricies fringilla. Suspendisse commodo nisi libero, id volutpat ligula mollis eu. Nam lacinia dui et nisi varius aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit rutrum nisl, placerat finibus arcu malesuada sit amet. Mauris nec pellentesque tortor. Nulla facilisi. In egestas dolor in molestie lacinia. Nullam dignissim maximus dolor a aliquet. Fusce sed leo a nisi lobortis sagittis id vitae nisi. Curabitur nibh diam, scelerisque in luctus sed, sagittis in quam. Quisque dignissim molestie ante eu eleifend. Duis hendrerit aliquam neque, nec luctus urna egestas nec.
</div>
<div class="lowbar">
    Phasellus ac rutrum quam. Mauris eget consectetur felis, id elementum ligula. Phasellus molestie nulla nec leo semper vulputate. Sed id metus non arcu rutrum pretium non eu sapien. Integer eget mauris non mauris lobortis luctus. Suspendisse non est lacinia lacus sollicitudin consequat. Sed sodales euismod ultricies. Etiam urna magna, malesuada vitae aliquam at, sodales sed arcu. Nullam maximus libero id nisl accumsan blandit.
</div>

</body>
</html>
Niente0
  • 504
  • 3
  • 11