1

What I am trying to accomplish is to get the footer of all my pages underneath the content of the body. All pages will have different sizes of body content. The challenging bit for me is to keep only one CSS for all pages.

I tried my best showing the css and HTML here but no luck. Instead here is a the JSFiddle of my code: https://jsfiddle.net/zsrsd20m/

 .container {
min-height:80%;
position:relative;
}

.titleText{
width:100%;
padding-top: 35px;
padding-bottom: 35px;
background-color: #127577;

color: white;
text-align: center;
}

.navBar{
 padding-right: 20px;
 float:left;
 }

.mainText{
 height:100%;
 padding-left:220px;
 padding-right:250px;
 padding-bottom:0px;
 font-size: 20px;
 text-align: justify;
}

.footerText{  
 width:100%;
 padding-top: 35px;
 padding-top: 23px;
 background-color: #127577;
 color: white;
 text-align: center;
}

.Container and all the other Divs made in HTML was made because of this: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

I want it so that even if the body content is too small the footer always stays at the bottom of the page. Same applies for if the body content is big. Currently when setting the height of the body content to 100% it shows me a scroll bar even when the content is small and doesnt need a scroll bar. When removing the height it makes the footer directly under the small body content which is half good but its not at the bottom of the page so it looks horrible.

Screenshots of the problems: https://i.stack.imgur.com/vrBDA.jpg

3 Answers 3

18

Wow - that link's old. We've got some better techniques available these days, namely flexbox.

/* The magic: */
.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

/* Stlyes to make the demo easier to see: */
body { margin: 0; }
header { background-color: #FDD; }
main { background-color: #DFD; }
footer { background-color: #DDF; }
<body class="Site">
  <header>Header</header>
  <main class="Site-content">Content</main>
  <footer>Footer</footer>
</body>

You can read all about it right here

8
  • Works Nicely! Cheers take your upvote and answer mark
    – Tantrix1
    Dec 5, 2017 at 9:58
  • Please can you check this now the problem with this is the content NOT being next to the navbar instead being a under the navbar. jsfiddle.net/mrhc8odL @JamesLong
    – Tantrix1
    Dec 5, 2017 at 10:57
  • 1
    @Tantrix1 - just put the navbar inside the main content. If you're worried that it won't be the correct height, I think you're looking for the "Holy Grail" layout
    – James Long
    Dec 5, 2017 at 11:01
  • Unless I am missing something, this does not appear to work with IE 11... Jan 24, 2018 at 18:49
  • @barrypicker - I keep forgetting that browser exists. Add display: flex; flex-direction: column; to the .Site parent (the <html> element in the snippet) to make it work
    – James Long
    Jan 25, 2018 at 9:29
2

Use sticky footer CSS https://css-tricks.com/couple-takes-sticky-footer/

<body>
  <div class="content">
    <div class="content-inside">
      content
    </div>
  </div>
  <footer class="footer"></footer>
</body>

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}
0

Try this.

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="" >Test Link</a>
      </p>

      <a href="" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>Copyright 2017</a>
    </div>

Reference: https://bootsnipp.com/snippets/featured/easy-sticky-footer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.