CODEWITHSUNDEEP
c#htmlcssasp.net-mvc
user7739387
user7739387

Reputation:

Force footer to stick at the bottom of rendered pages

Hey I try to force footer to move at the bottom of the page as the content is added. Similar to : http://jsfiddle.net/eTwJh/2/ . I'm using asp.net mvc with Layout page, where views are rendered as Layout page 'body' with @RenderBody().

P.S. Using position: relative for both footer and body-content now force footer to stay at the bottom of the page, but now hen page is opened, footer is at the half of the page (end of html) min-height: 100% on body element don't seem to have any effect..

Screenshoot: Footer not staying at the bottom of the page

Chrome Inspect Element: http:// imgur.com/BWuFxn2

Here is my code Layout.cshtml page: 

 <body>
 ....
 <div class="container body-content" style="position:relative">
    @RenderBody()
</div>
<footer>
    <p>&copy; @DateTime.Now.Year Some Text</p>
</footer>

@if (!User.Identity.IsAuthenticated)
{
<!-- BEGIN # MODAL LOGIN -->
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content" id="modal-content">
        </div>
    </div>
</div>
<!-- END # MODAL LOGIN -->
}
</body>
</html>

Here is my CSS:

footer {
  clear: both;
  background-color: #000;
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px solid #5c5c5c;
  position: absolute;
  bottom: 0px;
}

footer p {
    padding-left: 5px;
    color: #fff;
    display: table-cell;
}

Upvotes: 0

Views: 2557

Answers (1)

Fiffe
Fiffe

Reputation: 1256

Make sure both your body-content and footer classes have position set to relative. In the fiddle it's set to absolute because footer is inside wrapper and bottom: 0 pushes it to the bottom of that wrapper.

Or simply create a wrapper for these two divs like in provided fiddle.

Upvotes: 0

Related Questions