Search code examples
htmlcssfooter

Sticky footer doesn't work

Hi I know that there have been a lot of questions about this before but I can't seem to find my problem with the footer.

This did a lot already but when i scroll down, does my footer stay at the same place as it was when the page loaded. Is there a way to 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 and html have to be 100% to push header down */
	height: 100%;
	width: 100%;
}
body > #wrapper { /* all content must be wrapped... #wrapper is my 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 is the wrapper for the content without header or footer | padding-bottom = footer height */
	padding-bottom: 100px;
}
#footer { /* position must be absolute and bottom must be 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>
    &copy SvShop - door Demey Thimo 6ITN - in opdracht van De Jaeger Els </footer>
</body>
</html>

After editing the code as the answers say

Solution

  • This Code works for my footer. Thank you everybody who helped me.

    html {
position: relative;
min-height: 100%;}

form {
margin: 0px 22% -1rem ;
background-color: white;
min-height: 100%;
margin-bottom: -1em;}

footer {
border-top: 2px solid red;
border-bottom: 2px solid red;
color: black;
background-color: lightgrey;
font-size: 1em;
text-align: center;
padding: 1em;
position: absolute;
left: 0;
bottom: 0;
width: 100%;}

body {
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
line-height: 24px;
font-size: 12px;
background-color: #FF3333;
margin: 0 0 100px;
height: 100%;}