粘性页脚不起作用

Question

你好，我知道之前有很多关于此的问题，但我似乎找不到我的页脚问题。

This did a lot already 但是当我向下滚动时，我的页脚是否停留在与页面加载时相同的位置。有办法解决这个问题吗？

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>

Answer 1

我删除了“#”，因为它不是 ID。

footer { 
    height: 100px;
    width: 100%;
    background: rgba(255,255,255,0.2);
    position: absolute;
    bottom: 0;
}

Answer 2

看看 this sticky footer，如果您想要粘性页脚，它可能包含一些您可能感兴趣的代码。否则，诀窍是固定最小高度和边距值，如：

min-height: 100%; // This sends your footer at the bottom of your page
margin-bottom: -X em; // Where X is the height of your footer, em recommended

Answer 3

此代码适用于我的页脚。谢谢所有帮助过我的人。

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%;}

粘性页脚不起作用

Sticky footer doesn't work

html

css

footer