asp.net - Sticky footer in master page -
after days of searching code makes footer stick end of page, found works.
but realized, sticks end of page if have specific resolution. if has bigger screen or looking @ page in full view, doesn’t work anymore.
please help?
and also, know oh-so-famous sticky-footer sites. can't seem find answer here need specific code.
thanks!
masterpage:
<form id="form1" runat="server"> <div class="page"> <div class="header"> </div> <div class="main"> <asp:contentplaceholder id="contentplaceholder1" runat="server"> <div class="wrapper" /> </asp:contentplaceholder> </div> <asp:contentplaceholder id="footerplaceholder" runat="server"> </asp:contentplaceholder> </div> </form>
contentpage aspx
<asp:content id="content2" contentplaceholderid="contentplaceholder1" runat="server"> <h2>knowledge base</h2> <div class="push"></div> </asp:content> <asp:content id="content3" contentplaceholderid="footerplaceholder" runat="server"> <div class="footer"> © "companyname" </div> </asp:content>
css:
html { height: 100%;*/ } body { height: 100%; margin: 0px; } .page { width: 1200px; margin: auto; height: 100%; } .main { text-align: left; padding: 5px 15px; margin-top: 10px; } .footer { text-align: center; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0px auto -449px; } .push { clear: both; height: 449px; }
why not take standard approach:
<footer> <p>© <%: datetime.now.year %> - sometext</p> </footer>
css:
footer { display: block; position: absolute; bottom: 10px; }
edit: jsfiddle. excactly same code. footer @ bottom, no matter way resize browser window.
Comments
Post a Comment