当主要内容未填满页面时，如何在母版页上获取“页脚”内容以向下推

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.

我的问题是,当MainContent没有填满页面时,页脚不在页面的底部。如果主要内容没有将其完全推下,是否有办法强制页脚停留在页面底部?当主要内容足够“大”时,它会向下推内容,并在向下滚动时显示在底部,但如果它是小的则不显示。

Anybody know how to fix this?

有谁知道如何解决这个问题?

4 个解决方案

#1

Use the following in your css for the footer div:

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

bottom:0px;
position:absolute;

#2

Check these related questions for solutions:

检查这些相关问题的解决方案:

How do you get the footer to stay at the bottom of a Web page?

如何让页脚停留在网页的底部?

Can not get CSS Sticky footer to work. What am I doing wrong?

无法获得CSS Sticky页脚工作。我究竟做错了什么?

I would suggest zigdon's answer.

我会建议zigdon的回答。

#3

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

关于将页脚保持在底部的好文章和演示

#4

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

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

#1