html - 获取页脚始终位于页面 CSS 底部

Question

我需要母版页中的页脚始终显示在页面底部。现在一个内容页面太大，页脚重叠在内容页面上。我正在使用带有页眉和页 footer 分的母版页。 如果您需要其他代码，请告诉我。但我认为只需使用下面的 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>

Answer 1

您必须将页脚放在与内容容器相同的级别，然后将这些 css 行添加到您的页脚元素:

position:fixed;
bottom:0;

这是您的代码示例 http://jsfiddle.net/PPhbX/1/