2

I'm using the bootstrap framework and ASP.Net MVC 5. I want a footer on the bottom left of the screen. Reading a few tutorials and samples I ended up with this code in my _Layout.cshtml file:

 <footer class="footer">
    <div class="container">
        <p class="text-muted"><span>Version <a href="/ReleaseNotes.html">1.1.0.0</a></span></p>
    </div>
 </footer>

This shows a footer on the left bottom side of my page. But it is not fixed. If the website contains no content, the footer is shown on the top of the page.

How to set a fix location for the footer?

Unihedron
  • 10,902
  • 13
  • 62
  • 72
Philipp Eger
  • 2,235
  • 4
  • 23
  • 34
  • possible duplicate of [Twitter Bootstrap 3 Sticky Footer](http://stackoverflow.com/questions/17966140/twitter-bootstrap-3-sticky-footer) – DavidG Nov 18 '14 at 15:23

1 Answers1

4

I do this as on the getbootstrap.com: http://getbootstrap.com/2.3.2/examples/sticky-footer-navbar.html

Here is my example:

http://jsfiddle.net/zcbpbt5h/

CSS:

html,
body {
  height: 100%;
}

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

 #push,
 #footer {
   height: 60px;
 }

#footer {
  background-color: #f5f5f5;
}

HTML:

<div id="wrap">
<div class="container">content</div>
    <div id="push"></div>
</div>
 <footer id="footer">
 <div class="container">
     footer
  </div>
</footer>
Viktor Kireev
  • 1,200
  • 1
  • 8
  • 17
  • Great, I found this sample on my own but thought the relevant CSS classes are already included in bootstrap. Works now, thx. – Philipp Eger Nov 18 '14 at 15:33