CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfooter
Mazzy
Mazzy

Reputation: 14179

Create a sticky footer in a responsive manner

I'm trying to create a responsiveness sticky footer but without any success. I have followed every guide and every common best practices. Here it is my example: example

In the example I would put the footer at the bottom of the page.In addition I would use an image as background of the entire page

.blur {
  height: 100%;
  background: url('image.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

Do you have any idea?

Upvotes: 2

Views: 403

Answers (3)

Bir
Bir

Reputation: 812

Use the following code

HTML:

<body>


   <div id="wrap">



    </div>

    <div id="footer">

    </div>

CSS:

html,
body {
 height: 100%;
   /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
   height: 60px;
   background-color: #f5f5f5;
}

Edit HTML 

<!-- Wrap all page content here -->
<div id="blur">

  <!-- Begin page content -->

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4 inner">
                <h1 class="text-center">Title</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-4 btn-facebook-inner">
            <a href="/" class="btn btn-facebook center-block">Login with Facebook</a>
        </div>
    </div>

</div>

</div>

<div id="footer">
  <div class="container">

        <div class="row">
            <div class="col-md-3 col-md-push-9 social-icons">
                <ul class="list-inline">
                    <li>Facebook</li>
                    <li>Instagram</li>
                    <li>Twitter</li>
                </ul>
            </div>
            <div class="col-md-9 col-md-pull-3">
                <ul class="list-inline">
                    <li>Privacy Policy</li>
                    <li>Terms of Use</li>
                </ul>
            </div>
        </div>

  </div>
</div>

CSS

html,
body {
 height: 100%;
 /* The html and body elements cannot have any padding or margin. */
}


#blur {
  min-height: 100%;
  height: auto !important;
  height: 100%;
 /* Negative indent footer by its height */
  margin: 0 auto -60px;
 /* Pad bottom by footer height */
 padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
 height: 60px;
 background-color: #f5f5f5;
}

Upvotes: 0

Bart Daley
Bart Daley

Reputation: 70

I looked at this and went a different way. If you are inherently setting a "height" value for the footer, while your footer will still "respond", the background follows the styling and will only display at "n px" leaving you with the body color below.

Upvotes: 0

Devin
Devin

Reputation: 7720

keep your HTML just as is, and change your CSS to this (obviously you'll change it later to your needs, I just added styling for visualization purposes):

html, body {
    background-color: #FFF;
    font-family:'Raleway', 'Open Sans', sans-serif;
    font-weight: 400;
}
body {
    color: #333;
    background:url('http://2.bp.blogspot.com/-OSVC5PTEAKU/TZNnUHaoJZI/AAAAAAAAApo/WcP3qSUPAoo/s1600/monta%2525C3%2525B1as%252520verdes%255B1%255D.jpg') no-repeat 50%;
    background-size:cover;
    min-height: 100vh;
    padding-bottom:80px /* footer height + 20 px for spacing, but adjust as you like */;
}
a {
    color: #eee;
}
a:hover, a:focus {
    text-decoration: none;
    color: #dedede;
}
/* Langind Page */
 .inner {
    margin-top: 20px;
}
.btn-facebook-inner {
    margin-top: 80px;
    padding: 30px;
}
.btn-facebook {
    width: 300px;
    border-radius: 4px;
    background-color: #3B5998;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    font-family:'Lucida Grande', sans-serif;
}
.btn-facebook:hover, .btn-facebook:focus {
    color: #dfe3ee;
    text-decoration: none;
}
footer {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:60px;
    background:#fc0;
}
footer .social-icons > ul > li {
    padding-right: 12px;
}

See fiddle here

This will make the bottom to be fixed, so if you have a lot of content, the footer will overlap the content. If you don't want this behavior, change fixed to absolute

Just a comment I have seen on your code and see as a recurrent error around here: while it's common to target html and body together, they're NOT the same thing and not all styles applies to both

Upvotes: 2

Related Questions