CODEWITHSUNDEEP
htmlcss
Mike.Whitehead
Mike.Whitehead

Reputation: 818

CSS - Footer won't remain fixed to foot of the page

I'm loading a front-end site onto wordpress and on the blog page my footer won't stay fixed to the bottom of the page / wants to float upwards so it ends up looking like this -

Footer floating up the page

It doesn't do it on the other pages but I've also noticed on Google chrome there's a white strip at the foot of the page also on every page. I've looked for solutions via google - majority seem to suggest position: absolute but I've tried that and it hasn't worked. This is my code at the moment -

style.css

footer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  width: auto;
  background-color: black;
}

body {
  position: relative;
  margin-bottom: 6rem;

}

footer.php

<!-- footer -->
<footer>
    <div class="container-fluid">
        <div class="row no-gutters">
            <div class="col-md-3">
                 <div id="socialmedia">
                    <a href="#" class="icon-button twitter"><i class="fa fa-twitter"></i><span></span></a>
                    <a href="#" class="icon-button facebook"><i class="fa fa-facebook"></i><span></span></a>
                    <a href="#" class="icon-button google-plus"><i class="fa fa-google-plus"></i><span></span></a>
                    <a href="#" class="icon-button instagram"><i class="fa fa-instagram"></i><span></span></a>
                    <a href="#" class="icon-button pinterest"><i class="fa fa-pinterest"></i><span></span></a>
                </div>
            </div>
            <div class="col-md-6">        
                <div id="email">
                    <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/footer_logo.png" style="width: 150px; height: 50px; margin-bottom: 20px;">  
                    <p>Email: [email protected] </br>+971 (0)55 151 0491 or +971 (0)55 282 2114
                    </br>PO Box 769558, twofour54, Abu Dhabi</p>
                    <p>This website was design by us *pause for applause*</br> and built with his bare hands by Michael Whitehead.</br> &copy Havoc Creative 2017</p>
                </div>
            </div>    
        </div>        
    </div>  
</footer>       
<!-- /footer -->

Any help appreciated.

Upvotes: 0

Views: 1923

Answers (3)

Kārlis K.
Kārlis K.

Reputation: 72

I think your problem lies within the fact that you've reserved the space for your footer on body {} by setting a margin of 6rem, but not set any off-set for your footer, like top: 6rem;.

Don't forget - usually everything goes "inside" body {}, for example, like so:

<body>
   <header></header>
   <article>
      <left_column></left_column>
      <right_column></right_column>
   </article>
   <footer></footer>
</body>

So, again, to get the effect you want, you have to also off-set the footer position, otherwise you're just "lifting" the whole thing up together. So what you need to do is to modify your style.css to look like:

footer {
  position: fixed;
  top: 6rem;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  width: auto;
  background-color: black;
}

body {
  position: relative;
  margin-bottom: 6rem;

}

Another way would be to use padding-bottom instead of margin-bottom - that way body would fill the screen height and leave space for your footer, however, you'd have to change top: 6rem to something else then.

Upvotes: 0

user5718206
user5718206

Reputation:

Flexbox can help you! =) Remove position absolute from footer and try this solution:

Step 1: add this to your body element:

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

Step 2: add this to your footer: 

footer {
   margin-top: auto;
}

Also you can check this article for more ways to create a sticky footer.

Upvotes: 4

AgeDeO
AgeDeO

Reputation: 3157

Changing the position of the footer to fixed and removing top: 0 and right: 0 should do the trick.

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  height: auto;
  width: auto;
  background-color: black;
}

Upvotes: 0

Related Questions