ASP CSS页脚问题

本文关键字：问题 CSS ASP | 更新日期: 2023-09-27 17:57:53

以下是我的主页的设计方法：

  <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;
    }

以下是我无法解决的问题：

  • 我试着把页脚粘在底部，但这样这样，如果页面有很多内容，应该仍然可以工作
  • 整页与母版页居中对齐

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 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>

我已经解决了您的间距问题。

  1. 间距问题与行高度有关。您将为h1 设置行高

    收割台h1{

    padding-top: 1em;
background-color: #F8F8FF;
overflow: hidden;
font-size: 170%;
line-height: 21px;

    }

  2. 内容和导航菜单也有同样的问题。

  3. 粘性页脚：您将添加位置：固定和底部：0

  4. 将整页与母版页居中对齐。您将在body css 中再添加两个属性

    车身{边距：0自动；宽度：80%；}

相关文章：