How do I get ‘footer’ content on a master page to push down when main content doesn't fill a page

问题

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?

回答1:

Use the following in your css for the footer 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?

I would suggest zigdon's answer.

回答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"

来源：https://stackoverflow.com/questions/298449/how-do-i-get-footer-content-on-a-master-page-to-push-down-when-main-content-do

标签

ASP.NET

master-pages

footer