Question

我正面临一个问题

页面中的页脚停留不动但不在中心位置。

现在正确对齐

我想让它居中对齐。

之前它甚至没有停留，但随后应用了.footerContent css，如下所述。

申请.footerContent后。它解决了我的页脚不在页面底部的问题。现在它在底部，但显示广泛的权利。一半的页脚被削减。

你们可以纠正，告诉我什么是错的。

我附在这里的屏幕，以便你可以放置页脚。 see here

继承人标记

<body>
    <form id="form1" runat="server">
    <div id="wrapper">
        <div id="header" runat="server">
        <%-- Menu goes here --%>
      </div>    
      <div id="masterpageContent" class="footer">
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
      </div>  
    </div>
    <div class="footerContent">
        <div class="footerbrd">
        </div>
        <p class="clear">
        </p>
        <div class="footer">
            <div class="c1 fleft">
                Best viewed in IE8 and above with Resolution 1024x768
            </div>
            <div class="c2 fleft">
                (c) Copyright 2013 
                <br />
                All Rights Reserved.
            </div>
            <div class="c3 fright">
                Site by abc Team
            </div>
            <p class="clear">
            </p>
        </div>
    </div>
    </form>
</body>

和heres css

/ 页脚开始 /

.footerbrd {width:929px; height:1px; background:#ef0b14; margin:0px auto;}
.footer {width:929px; margin:0px auto; padding:5px 0px; color:#666666;}
.footer .c1 {width:300px; margin:0px; padding:0px;}
.footer .c2 {width:375px; margin:0px; padding:0px; text-align:center;}
.footer .c3 {width:254px; margin:0px; padding:0px 0px 0px 0px; text-align:right;}
ul.foot {list-style:none; padding: 0px 0px; margin: 0px;}
ul.foot li {list-style:none; float:left; line-height:12px;}
ul.foot li a {color:#666666; padding: 2px 10px; font-size:11px; text-decoration:none; display:block; float:left;}

.footerContent { 
    position: absolute;
    height: 50px;
    width: 929px;
    margin: auto;
    bottom: 0px;   
}

/ 页脚结束 /

Answer 1

将100%中的宽度更改为.footerContent，并将其边距设置为0 auto。它应该适合你。

Answer 2

我在google上找到了这个问题并找到了问题的解决方案（现在有点晚了，但对于每个正在寻找的人来说）

页面应如下所示：

<html>
    <head runat="server">
        <title></title>

        <link rel="Stylesheet" href="../Scripts/layout.css" />

    </head>
    <body>
        <form id="form1" runat="server">
        <div id="wrapper">
            YOUR PAGE HERE      

          <div id="push">
          </div>
        </div>

        <div class="footer">
        YOUR FOOTER HERE    
        </div>
        </form>
    </body>
</html>

在'layout.css'文件中（将其保存在您网站的'Scripts'文件夹中），添加：

.wrapper 
{
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -20px;  /*the bottom margin is the negative value of the footer's height*/
}
.push
{
    height: 20px;  /*'.push' must be the same height as 'footer'*/
}
.footer
{ 
    position: absolute;
    height: 20px;
    width: 99%;
    margin: auto;
    bottom: 0px;
    text-align: center;
}

在asp.net中制作中心对齐底页页脚

2 个答案: