Question

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

的示例

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

1 个答案: