Madde Persson Madde Persson - 3 days ago 6
CSS Question

bootstrap sticky footer but no scroll content

I want a stick to bottom footer, witch i have but my content scrolls when it fills the page to the content, i want my content to push the footer down instead of scrolling.
I use Bootstrap

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;
/* Negative indent footer by its height */
margin: 0 auto -250px;
/* Pad bottom by footer height */
padding: 0 0 250px;
}

/* Set the fixed height of the footer here */
#footer {
height: 250px;
}

#footer {
background-color: #000000;
border-top:1px solid gray;
background-image:url('../img/bg1.png');
background-repeat:repeat-x;
background-position:center bottom;
}


html

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

<!-- Begin page content -->
<div class="container">

<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div id="push">
</div>

<footer id="footer" class="footer navbar-fixed-bottom">
<div class="container body-content">
<p style="margin-top:20px;">&copy; <%: DateTime.Now.Year %> - Make-Up Studio Sverige</p>
</div>
</footer>

Answer

the solution is to delete the class="footer navbar-fixed-bottom" in the
<footer id="footer" class="footer navbar-fixed-bottom">

The answers i got work in js fiddle as long as you don't put in the bootstrap css.

Comments