Question

我有一个带有页脚div的简单母版页。但它在内容页面和页脚之间出现了差距。可能是什么原因？

enter image description here

<body >
<form id="form1" runat="server">
<div>
    <table cellpadding="0" cellspacing="0" class="mmaintable">
         <tr>
        <td class="mmaintableside">&nbsp;</td>
        <td class="mmaintablemiddle" colspan="4">
            <table cellpadding="0" cellspacing="0" class="munmaintable"> 
                </table>
                </td>
        <td class="mmaintableside">&nbsp;</td>
   </tr>
   </table>
    <div class="contentpage">
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
        <div class="Footercontent">
            <h2>Footer
            </h2>
        </div>
    </div>
</div>
</form>
</body>

如您所见，我没有在contentplaceholder1和footer之间留下任何tr或div。

我的CSS：

    .mmaintable {
        width: 100%;
        padding:0;
    }
    .mupdatepaneltable {
        width: 100%;
    }
    .mmaintableside {
        width: 198px;
    }
    .mmaintablemiddle {
        width: 938px;
    }
    .munmaintable {
        width: 938px;
    }
    .munmaintable1 {
        text-align:right;
        width: 234.5px;
        color: #CCCCCC;
    background-color: #FF0066;
    }
    .munmaintable2 {
        text-align:left;
        width: 234.5px;
        color: #CCCCCC;
     background-color: #FF0066;
    }
    .munmaintable3 {
        text-align:left;
        width: 234.5px;
        color: #CCCCCC;
     background-color: #FF0066;
    }
    .munmaintable4 {
        text-align:left;
        width: 234.5px;
        color: #CCCCCC;
     background-color: #FF0066;
    }
    .mmergedunmaintable23 {
        width: 300px;
        color: #CCCCCC;
        text-align:center;
            }
    .backgroundimage {
    background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-image: url('../Images/stadium2.png');
   background-repeat: no-repeat;
   background-attachment: fixed;
 }
    #ContentPlaceHolder1
    {
        width:938px;
        text-align:center;
    }
    .contentpage{
        width:938px;
        text-align:center;
        margin:0 auto;
    }
    .Footercontent {
        width:938px;
        text-align:center;
        margin:0 auto;
        background-color:#FF0066;
   }
    .clear {
        clear:both;
    }

Answer 1

你能提供任何CSS吗？

试试这个：

.Footercontent {
margin:0
padding:0
}

Answer 2

您还可以尝试删除h2保证金

.Footercontent h2{
    margin: 0;
}

Answer 3

试试这个......

<强> CSS

.Footercontent {
    width:938px;
    text-align:center;
    margin: -20px auto 0 auto;
    background-color:#FF0066;
}

为什么我的内容页面和页脚之间存在差距？

3 个答案: