[英]Get a footer to always be on bottom of page CSS
我需要在我的母版页面中将我的页脚始终显示在页面底部。 现在,一个内容页面变大,页脚覆盖内容页面。 我使用带有页眉和页脚部分的母版页。 如果您需要其他代码,请告诉我。 但我认为只需使用下面的CSS即可解决。
页脚的CSS
div#Footer
{
width: 100%;
height: 80px;
padding: 1px;
-moz-border-radius: 35px;
border-radius: 35px;
background-color: Black;
color: #ffffff;
position: absolute;
bottom: 0px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
页面的Css嵌入在母版页中
#MainComments
{
width: 60%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#LeaveComments
{
margin-left: auto;
margin-right: auto;
text-align: left;
width: 60%;
}
嵌入母版页面的页面标记
<div id="MainComments">
<asp:Image ID="CommentedImage" ImageUrl="~/Pictures/4.jpg" Width="50%" runat="server" />
<br />
<br />
<asp:Label ID="lblCommenter" runat="server" Text="By Josh"></asp:Label><br />
<asp:TextBox ID="PicComments" Text="Hello" runat="server" Rows="3" Width="50%" TextMode="MultiLine"
ReadOnly="True"></asp:TextBox>
<br />
</div>
<div id="LeaveComments">
Leave Comments:<br />
<asp:TextBox ID="txtEmail" runat="server" Text="Enter your email."></asp:TextBox><asp:Label
ID="lblDirections" runat="server" Text="You must have an account to leave commnets."></asp:Label>
<br />
<asp:TextBox ID="txtComment" runat="server" Width="50%" Rows="3"
TextMode="MultiLine"></asp:TextBox><br />
<asp:Button ID="Button1" runat="server" Text="Leave Comment"
onclick="Button1_Click" />
</div>
您必须将页脚放在与内容容器相同的级别,然后将这些css行添加到页脚元素:
position:fixed;
bottom:0;
这是您的代码http://jsfiddle.net/PPhbX/1/的示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.