0

我面临一个问题

我在页面中的页脚保持向下，但它不在中心。

它现在右对齐

我想让它居中对齐。

早些时候它甚至没有停下来，而是应用了下面提到的 .footerContent css。

应用 .footerContent 后。它解决了我的页脚不是页面底部的问题。现在它在底部，但显示广泛正确。一半的页脚被剪掉。

你们能纠正吗？告诉我什么是错的。

我在这里附加屏幕，以便您可以定位页脚。 看这里

继承人标记

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

和继承人的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;   
}

/页脚结束/

4

2 回答 2

2

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

于 2013-09-27T06:20:40.673 回答
0

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

该页面应如下所示：

<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;
}
于 2014-03-15T10:47:07.200 回答