我有一个页脚贴在每一页的底部(我也想要)，但是当我的一个页面中有很多文本并且需要向下滚动时，它认为页脚不是一部分页面的底部，它会一直向下滚动到页面文本，这会导致页脚超出页面底部上下文。
我希望网站向下滚动，但将页脚保持在页面上下文下方和上下文之上。
我该怎么办？
这是我的主页
HTML代码:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Styles/MasterStyleSheet.css" rel="stylesheet" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="<%= Page.ResolveUrl("~/Scripts/ShoppingCartSideMenuJavaScript.js") %>"></script>
<script type="text/javascript" src="<%= Page.ResolveUrl("~/Scripts/MasterMenuJavaScript.js") %>"></script>
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="mask">
</div>
<div id="ShoppingCartSideMenu">
<div id="CartMenuTop">
<div>
<img id="menu-close" src="/Images/Icons/X-icon.png" />
</div>
<div id="CartHeader">
Cart
</div>
</div>
</div>
<div class="wrapper">
<h1 id="SiteTitle">JEWELRY</h1>
<p id="UnderSiteTitle">EXCLUSIVE SWISS MADE JEWELRY</p>
<div id="menu">
<ul>
<li><a href="Home.aspx">HOME</a></li>
<li><a href="Shop.aspx">SHOP</a></li>
<li><a href="About.aspx">ABOUT</a></li>
<li><a href="TermsAndConditions.aspx">Terms & Conditions</a></li>
<li><a href="Contact.aspx">CONTACT</a></li>
<li id="seperator">|
</li>
<li>
<div id="CartImage">
<a id="ShoppingCartBtn">
<img class="ShoppingCart" src="/Images/Icons/Shopping_cart.png" />
<label id="CountCartItems">0</label>
</a>
</div>
</li>
</ul>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<footer>
<div class="FooterWrapper">
<div id="FooterDiv1">
© 2016 JEWELRY - Created by nirh1989
</div>
<div id="FooterDiv2">
<a href="#">
<img id="FooterFacebook" class="Icons" alt="Facebook" src="/Images/Icons/facebook-logo.png" /></a>
<a href="#">
<img id="FooterTwitter" class="Icons" alt="Twitter" src="/Images/Icons/twitter-logo.png" /></a>
<a href="#">
<img id="FooterInstagram" class="Icons" alt="Instagram" src="/Images/Icons/instagram-logo.png" /></a>
</div>
</div>
</footer>
</form>
</body>
</html>
CSS 代码:
body {
}
form {
margin-bottom: 100px;
}
.wrapper {
width: 960px;
margin: 0 auto;
}
#SiteTitle {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 24px;
text-align: center;
}
#UnderSiteTitle {
font-family: raleway;
font-size: 17px;
text-align: center;
}
#menu {
margin-top: 50px;
height: 40px;
border-top: 1px solid lightgrey;
border-bottom: 1px solid lightgrey;
}
#menu ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#menu ul li {
font-family: arial;
float: left;
padding: 12px 37px;
}
#menu ul li a, a:visited, a:active {
transition: 2s;
color: black;
text-decoration: none;
}
#menu ul li a:hover {
transition: 0.25s;
color: gray;
}
#menu ul li .active {
transition: 0s;
color: gray;
}
#seperator {
color: lightgrey;
font-size: 30px;
margin-top: -11px
}
#CartImage {
position: relative;
}
.ShoppingCart {
height: 40px;
width: 40px;
margin-top: -12px;
outline: none;
cursor: pointer
}
#ShoppingCartBtn {
cursor: pointer;
}
#CountCartItems {
position: relative;
right: 24px;
bottom: 21px;
color: white;
font-size: 12px;
cursor: pointer;
}
#mask {
background-color: rgba(25, 25, 25, 0.8);
height: 100%;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
visibility: hidden;
z-index: 250;
}
#ShoppingCartSideMenu {
background-color: white;
height: 100%;
width: 350px;
position: fixed;
top: 0px;
right: -350px;
z-index: 350;
}
#CartMenuTop {
background-color: rgb(55, 55, 55);
width: 100%;
height: 100px;
}
#CartHeader {
color: white;
font-size: 30px;
font-family: arial;
float: right;
margin-top: 30px;
margin-right: 150px;
}
#menu-close {
float: left;
width: 30px;
height: 30px;
margin-top: 35px;
margin-left: 35px;
cursor: pointer;
}
footer {
position: fixed;
border-top: 1px solid lightgrey;
bottom: 0px;
left: 0px;
width: 100%;
text-align: center;
background-color: white;
}
.FooterWrapper {
width: 960px;
margin: 0 auto;
text-align: center;
}
#FooterDiv1 {
margin-top: 20px;
margin-bottom: 20px;
float: left;
color: #595959;
font-family: arial;
font-size: 12px;
}
#FooterDiv2 {
float: right;
margin-top: 17px;
}
.Icons {
width: 20px;
height: 20px;
padding: 0px 10px;
}
另外，附上我的问题的例子
最佳答案
好的，将页脚更改为 position: absolute, bottom: 0, left: 0, right: 0。 然后将其添加到您的正文标签中:
body{
position: relative;
padding-bottom: 15rem;
}
关于html - 母版页中的页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38880100/