html - Sticky footer doesn't work -
hi know there have been lot of questions before can't seem find problem footer.
this did lot already when scroll down, footer stay @ same place when page loaded. there way fix this?
body { font-family: trebuchet ms, verdana, arial, helvetica, sans-serif; line-height: 24px; font-size: 12px; background-color: #ff3333; height: 100%; } h1 { color: #777777; font-weight: normal; font-size: 19px; text-transform: uppercase; border-bottom: 3px #dddddd solid; padding: 3px 0px; margin-left: 5px; } p { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; margin-left: 5px; font-size: 1.5em; } h2 { display: block; font-size: 1.5em; -webkit-margin-before: 0.83em; -webkit-margin-after: 0.83em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: bold; margin-left: 5px; } .logo { position: absolute; padding-bottom: 5px; padding-right: 10px; top: 20px; right: 20px; } form { margin: 0px 22% -1rem; background-color: white; min-height: 100%; margin-bottom: -60px; } #mainnav { margin-left: 5px; } .gridvieweditrow { width: 100%; } body, html { /*body , html have 100% push header down */ height: 100%; width: 100%; } body > #wrapper { /* content must wrapped... #wrapper id. position relative important */ position: relative; height: auto; min-height: 100%; } #header { height: 100px; background: rgba(255,255,255,0.2); } #content-wrap { /*#content-wrap wrapper content without header or footer | padding-bottom = footer height */ padding-bottom: 100px; } #footer { /* position must absolute , bottom must 0 */ height: 100px; width: 100%; background: rgba(255,255,255,0.2); position: absolute; bottom: 0; }<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>svshop!</title> <link href="../css/svshop.css" rel="stylesheet" /> <link rel="shortcut icon" href="/images/svshopicon.ico" /> <asp:contentplaceholder id="head" runat="server"></asp:contentplaceholder> <style type="text/css"> #container { height: 506px; margin-top: 0px; } </style> </head> <body> <div id="wrapper"> <div class="logo"> <img src="../images/svshop%20logo%20(links%20rood,%20zwarte%20tekst).jpg" style="height: 140px; width: 140px" /> </div> <form runat="server"> <div class="page-wrap"> <h1>svshop</h1> <div id="mainnav"> <asp:menu id="menumain" runat="server" orientation="horizontal"> <items> <asp:menuitem navigateurl="~/index.aspx" text="startpagina" value="startpagina"></asp:menuitem> <asp:menuitem text="kopen" value="kopen"> <asp:menuitem navigateurl="~/overzichten/overzichtatlas.aspx" text="atlas" value="atlas"></asp:menuitem> <asp:menuitem navigateurl="~/overzichten/overzichtrekenmachine.aspx" text="rekenmachine" value="rekenmachine"></asp:menuitem> </asp:menuitem> <asp:menuitem navigateurl="~/verkopen.aspx" text="verkopen" value="verkopen"></asp:menuitem> <asp:menuitem text="contact" value="contact"> <asp:menuitem navigateurl="~/contact/contact.aspx" text="contact" value="contact"></asp:menuitem> <asp:menuitem navigateurl="~/contact/info.aspx" text="info" value="info"></asp:menuitem> </asp:menuitem> </items> </asp:menu> </div> <br /> <br /> <asp:contentplaceholder id="contentplaceholder1" runat="server"> </asp:contentplaceholder> </div> </form> </div> <footer> © svshop - door demey thimo 6itn - in opdracht van de jaeger els </footer> </body> </html>
i removed "#" since isn't id.
footer { height: 100px; width: 100%; background: rgba(255,255,255,0.2); position: absolute; bottom: 0; }
Comments
Post a Comment