I’ve been trying to get the following to work to keep the footer at the bottom of the page. I’ve had this from here and it works well. I can’t get it to keep the footer at the bottom when using master pages. I know that this may be because I’m new to using master pages. From what I can make out, the properties of the "body" tag do not seem to apply to the asp placeholder. Any ideas on what I could be doing wrong?
Here is my Master page:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MJT Footer at bottom.master.cs" Inherits="styles_MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="<head runat="server">
<title>Untitled Page</title>
<link href="styles/MJTFooterAtBottom.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="header"></div>
<div id="body">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer"></div>
</div>
</form>
</body>
</html>
The style sheet is as follows:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
The content page is as follows:
<%@ Page Language="C#" MasterPageFile="~/MJT Footer at bottom.master" AutoEventWireup="true" CodeFile="MJT Footer at bottom.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
Test Content MJT
</asp:Content>
Here is my Master page:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MJT Footer at bottom.master.cs" Inherits="styles_MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="<head runat="server">
<title>Untitled Page</title>
<link href="styles/MJTFooterAtBottom.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="header"></div>
<div id="body">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer"></div>
</div>
</form>
</body>
</html>
The style sheet is as follows:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
The content page is as follows:
<%@ Page Language="C#" MasterPageFile="~/MJT Footer at bottom.master" AutoEventWireup="true" CodeFile="MJT Footer at bottom.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
Test Content MJT
</asp:Content>