Сделать нижний колонтитул всегда внизу страницы 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>

person CsharpBeginner    schedule 22.12.2011    source источник
comment
Попробуйте это: stackoverflow.com/questions/42294/   -  person the_    schedule 22.12.2011
comment
Почему абсолютно? Является ли контент, который он перекрывает, абсолютным?   -  person Nick Rolando    schedule 22.12.2011
comment
@shredder просто скопируйте и вставьте URL-адрес, он будет сгенерирован правильно.   -  person Damon Bauer    schedule 22.12.2011
comment
Я так понимаю, нижний колонтитул идет сразу после LeaveComments   -  person Nick Rolando    schedule 22.12.2011
comment
да, это так и немного перекрывает это. Я хочу, чтобы он перемещался в зависимости от размера вложенной страницы.   -  person CsharpBeginner    schedule 22.12.2011
comment
возможный дубликат липкого нижнего колонтитула CSS   -  person Diodeus - James MacFarlane    schedule 22.12.2011


Ответы (1)


Вы должны поместить нижний колонтитул на тот же уровень, что и контейнер содержимого, а затем добавить эти строки css в элемент нижнего колонтитула:

position:fixed;
bottom:0;

Это пример с вашим кодом http://jsfiddle.net/PPhbX/1/.

person I.G. Pascual    schedule 22.12.2011