【发布时间】：2016-12-17 05:35:18
【问题描述】：
我有一个页脚，它贴在每一页的底部（我也想要），但是当我的一个页面中有很多文本并且需要向下滚动时，它认为页脚不是一部分页面，它一直向下滚动直到页面文本，这导致页脚超出页面的底部上下文。
我希望网站向下滚动，但将页脚保持在页面上下文下方和上下文之上。
我该怎么办？
这是我的主页
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;
}
【问题讨论】：
-
你试过把页脚放在表单标签之外吗？
-
您的 ContentPlaceHolder 可能继承了最大高度样式。使用浏览器开发工具中的元素选择器突出显示该 div。然后查看应用的样式，看看它是否继承了最大高度样式。
-
我尝试将页脚放在表单标签之外，结果还是一样
-
我用开发工具检查过，似乎
.wrapper从顶部到菜单，即使所有内容都在里面 -
为包装类添加一些底部填充？
标签： html css asp.net master-pages sticky-footer