如何获取“页脚” 当主要内容未填满页面时,母版页上的内容要下推

发布于 2024-07-09 05:30:42 字数 1237 浏览 7 评论 0原文

我的母版页有以下代码:

<%@ 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

雨后咖啡店 2024-07-16 05:30:42

在页脚 div 的 css 中使用以下内容:

bottom:0px;
position:absolute;

Use the following in your css for the footer div:

bottom:0px;
position:absolute;
禾厶谷欠 2024-07-16 05:30:42

好文章& 演示此处也涉及将页脚保持在底端

Good article & demo here also regarding keeping the footer at the bottom

若有似无的小暗淡 2024-07-16 05:30:42

对包裹主要内容的 div 应用最小高度,例如 style="min-height:400px"

Apply a minimum height to the div wrapping your main content eg style="min-height:400px"

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文