如何获取“页脚” 当主要内容未填满页面时,母版页上的内容要下推
我的母版页有以下代码:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" style="position:relative">
<title>Masterpage</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="main" runat="server" style="position:relative">
<div>
<asp:ContentPlaceHolder id="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<br style="clear:both" />
<form id="footer" style="position:relative">
<div>
<center style="font-size:small">Footer content</center>
</div>
</form>
</body>
</html>
我的问题是,当 MainContent 未填满页面时,页脚不在页面底部。 如果主要内容没有将页脚一直向下推,是否有办法强制页脚停留在页面底部? 当主要内容足够“大”时,它会将页脚与内容一起向下推,并在向下滚动时显示在底部,但如果它太小则不会。
有人知道如何解决这个问题吗?
I have the following code for my masterpage:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" style="position:relative">
<title>Masterpage</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="main" runat="server" style="position:relative">
<div>
<asp:ContentPlaceHolder id="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<br style="clear:both" />
<form id="footer" style="position:relative">
<div>
<center style="font-size:small">Footer content</center>
</div>
</form>
</body>
</html>
My problem is that when the MainContent isn't filling up the page the footer is not at the bottom of the page. Is there a way to force the footer to stay on the bottom of the page if the main content isn't pushing it all the way down? When the main content is "big" enough it pushes the footer down with the content and displays on the bottom when scrolling down, but not if it is to small.
Anybody know how to fix this?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
在页脚 div 的 css 中使用以下内容:
Use the following in your css for the footer div:
检查以下相关问题以获取解决方案:
我建议zigdon 的回答。
Check these related questions for solutions:
I would suggest zigdon's answer.
好文章& 演示此处也涉及将页脚保持在底端
Good article & demo here also regarding keeping the footer at the bottom
对包裹主要内容的 div 应用最小高度,例如 style="min-height:400px"
Apply a minimum height to the div wrapping your main content eg style="min-height:400px"