ASP CSS頁腳問題

這裏是我的母版頁是如何設計：ASP CSS頁腳問題

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
    <title>Title</title> 
    <link href="stylesheet.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
    <div id="container"> 
    <form id="form1" runat="server"> 
     <div id="header"> 
     <h1 class="Title">Title</h1> 
     <span class="TagLine">tagline</span> </div> 
     <div id="navigation"> 
     <table> 
      <tr> 
      <td><asp:Menu ID="m" runat="server" Orientation="Horizontal"> 
       <Items> 
        <asp:MenuItem Text="Home" NavigateUrl="~/Default.aspx"></asp:MenuItem> 
       </Items> 
       </asp:Menu></td> 
      </tr> 
     </table> 
     </div> 
     <div id="body"> 
     <asp:ContentPlaceHolder ID="MainContent" runat="server"> 
     </asp:ContentPlaceHolder> 
     </div> 
     <div id="Footer"> 
     <p>footer</p> 
     </div> 
    </form> 
    </div> 
    </body> 
    </html>

這是我的CSS：

body { 
     margin: 20px 20px 20px 20px; 
     padding: 0; 
     font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
     color: darkslategrey; 
     width: 960px; 
     background-color: #F8F8FF; 
     margin: 0; 
     height: 100%; 
     position: relative; 
    } 
    #container { 
     min-height: 100%; 
     position: relative; 
     height: 100%; 
    } 
    #header { 
     height: 120px; 
     overflow: hidden; 
    } 
    #Content { 
     margin: 5px; 
     background-color: #F8F8FF; 
     overflow: hidden; 
    } 
    #Footer { 
     position: absolute; 
     background: #F8F8FF; 
     text-align: center; 
    } 
    #header .Title { 
     color: #2E2E2E; 
    } 
    #header h1 { 
     padding-top: 1em; 
     background-color: #F8F8FF; 
     overflow: hidden; 
     font-size: 170%; 
    } 
    h1 { 
     padding-top: 1em; 
     background-color: #F8F8FF; 
     overflow: hidden; 
     font-size: 100%; 
    } 
    #header .TagLine { 
     color: #2E2E2E; 
    } 
    .Menu li { 
     display: inline; 
     margin: 0px; 
    } 
    .Menu a { 
     text-decoration: none; 
     background-color: #BDBDBD; 
     padding: 5px; 
     color: White; 
     border-right: .5px solid White; 
     margin: 0px; 
    } 
    .Menu a:hover { 
     background-color: #BDBDBD; 
     padding: 5px; 
     margin: 0px; 
    } 
    .Menu { 
     text-align: justify; 
     font-size: 25px; 
    } 
    .menuhover { 
     color: #fff; 
    }

這裏有問題，我不能推測：

我試圖將頁腳粘貼在底部，但是如果頁面有很多內容應該仍然可以工作，這種方式也是如此。
中心對齊整個頁面和主頁

來源

2016-07-21 Cannon

可能性 1-）含量{填充頂：1em的; //試圖刪除它 } 2-）body {padding：10px; // play with it} 分享你的意見，讓我可以幫助你更多 –

沒有幫助。嘗試從內容中刪除填充並從css中刪除#body。還是一樣。我已經從最初的問題CSS中刪除了相同的。 – Cannon

#header h1＆h1也有padding-top：1em試試這個也可能會這樣做 –

更新：試試這個

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Title</title> 
    <link href="stylesheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <div id="container"> 
     <form id="form1" runat="server"> 
      <div id="header"> 
       <h1 class="Title">Title</h1> 
       <span class="TagLine">tagline</span> 
      </div> 
      <div id="navigation"> 
       <table cellpadding="0" cellspacing="0" width="1000" align="center"> 
        <tr> 
         <td> 
          <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssClass="Menu" Font-Names="Verdana" ForeColor="Black" Width="800px"> 
           <staticmenuitemstyle height="40px" /> 
           <dynamicmenuitemstyle cssclass="Menu" height="40px" horizontalpadding="25px" /> 
           <dynamichoverstyle cssclass="menuhover" /> 
           <statichoverstyle cssclass="menuhover" /> 
           <items> 
            <asp:menuitem text="Home" navigateurl="~/Default.aspx"></asp:menuitem> 
           </items> 
          </asp:Menu> 
         </td> 
        </tr> 
       </table> 
      </div> 
      <div id="body"> 
       <asp:ContentPlaceHolder ID="MainContent" runat="server"> 
        <!-- Page-specific content will go here... --> 
       </asp:ContentPlaceHolder> 
      </div> 
      <div id="Footer"> 
       <p>footer</p> 
      </div> 
     </form> 
    </div> 
</body> 
</html>

CSS：

<style type="text/css"> 

    body { 
     margin: 20px 20px 20px 20px; 
     padding: 0; 
     font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
     color: darkslategrey; 
     width: 960px; 
     background-color: #F8F8FF; 
     margin: auto; 
     padding:auto; 
     height: 100%; 
     position: relative; 
    } 
    #container { 
     min-height: 100%; 
     position: relative; 
     height: 100%; 
    } 
    #body { 
     padding: 10px; 
    } 
    #header { 
     margin: 10px 10px 0px 10px; 
     height: 120px; 
     overflow: hidden; 
    } 
    #Content { 
     padding-top: 1em; 
     margin: 5px; 
     background-color: #F8F8FF; 
     overflow: hidden; 
    } 
    #Footer { 
     position: fixed; 
     background: #F8F8FF; 
     text-align: center; 
     bottom:0px; 

    } 
    #header .Title { 
     color: #2E2E2E; 
    } 
    #header h1 { 
     margin:0px; 
     padding:0px; 
     background-color: #F8F8FF; 
     overflow: hidden; 
     font-size: 170%; 
    } 
    h1 { 
     padding:0px; 
     margin:0px; 
     background-color: #F8F8FF; 
     overflow: hidden; 
     font-size: 100%; 
    } 
    #header .TagLine { 
     color: #2E2E2E; 
    } 
    .Menu li { 
     display: inline; 
     margin: 0px; 
    } 
    .Menu a { 
     text-decoration: none; 
     background-color: #BDBDBD; 
     padding: 5px; 
     color: White; 
     border-right: .5px solid White; 
     margin: 0px; 
    } 
    .Menu a:hover { 
     background-color: #BDBDBD; 
     padding: 5px; 
     margin: 0px; 
    } 
    .Menu { 
     text-align: justify; 
     font-size: 25px; 
    } 
    .menuhover { 
     color: #fff; 
    } 

</style>

來源

2016-07-21 05:48:18 user2960398

中工作得很好。一個問題，但。什麼是在中使用包裝CSS內容。如果我刪除這些標籤，看起來會發生很大變化 – Cannon

ASP CSS頁腳問題

回答