2011-12-22 53 views
2

我需要在我的母版頁中使用頁腳來始終顯示頁面底部。現在,一個內容頁面變得很大,並且頁腳超過了內容頁面。我正在使用具有頁眉和頁腳部分的母版頁。 如果你需要其他代碼讓我知道。但我認爲它可以通過下面的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> 
+0

試試這個:http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at網頁底部 – 2011-12-22 18:39:09

+1

爲什麼它是絕對的?它的內容是否絕對重疊? – 2011-12-22 18:39:21

+1

嘗試:http://stackoverflow.com/questions/4700810/make-the-footer-stick-at-the-bottom-of-the-page或http://stackoverflow.com/questions/3443606/make-footer -stick-to-bottom-of-page-correct或http://stackoverflow.com/questions/5057008/making-a-footer-stick-to-the-bottom-of-the-page或http:// stackoverflow .com/questions/2354361/ways-to-stick-footer-to-the-the-bottom-a-page或http://stackoverflow.com/questions/3063393/how-to-make-the-footer-to-stick - 完全在頁面底部 – motoxer4533 2011-12-22 18:46:10

回答

9

你必須把頁面頁腳與內容容器處於同一級別,然後將這些CSS行添加到頁腳元素:

position:fixed; 
bottom:0; 

這是你的代碼的例子http://jsfiddle.net/PPhbX/1/

+2

完美的謝謝! – CsharpBeginner 2011-12-22 23:53:09