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

我删除了＆＃34;＃＆＃34;因为它不是一个id。

Message:
    Invalid mapping: {"generated":{"line":1293,"column":2},"source":"C:/Project/angularjs/ucom/remake/bower_components/bootstrap/less/type.less","original":{"line":1,"column":null},"name":null} in file undefined line no. undefined
Details:
    lineNumber: undefined
    fileName: undefined

Answer 2

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

$('document:contains(". <?php $rowname ?> . ")').css('background-color', 'red');

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

粘性页脚不起作用

3 个答案: