Question

无论内容的长度如何，我都试图在我的内容下的网页上设置页脚。出于某种原因，它不想。

HTML：

<div class="container">
    <div class="navigatie">
        <ul>
            <a class="navigatielink" href="index.php?page=home"><li class="navigatieli navigatie1">Home</li></a>
            <a class="navigatielink" href="index.php?page=info"><li class="navigatieli navigatie2">Info</li></a>
            <a class="navigatielink" href="index.php?page=agenda"><li class="navigatieli navigatie3 ">Agenda</li></a>
            <a class="navigatielink" href="index.php?page=fotos"><li class="navigatieli navigatie4">Foto's</li></a>
            <a class="navigatielink" href="index.php?page=contact"><li class="navigatieli navigatie5">Contact</li></a>
            <a class="navigatielink" href="index.php?page=gastenboek"><li class="navigatieli navigatie6">Gastenboek</li></a>
        </ul>
    </div>
    <?php
        //include the page content
        include_once ("content/".$_PAGE.'.php');
    ?>
</div>
<div class="clear"></div>
<div class="footer">

CSS：

.container {
    width: 1000px;
    margin: auto;
    height: auto;
}

.clear {
    clear: both;
}
.footer {
    background-image: url("images/css/footer.png");
    height: 500px;
}

.navigatie {
    font-family: Rockwell;
    height: 45px;
    width: 980px;
    margin:auto;
    margin-top: 15px;
    font-size: 24px; 
    border: 1px solid #c3c3c3;
    background: #fff;
}

我已经尝试给.container一个100％的高度并玩定位，但我似乎无法在内容下得到这个页脚，无论其长度如何...... <登记/> 还有其他建议吗？

修改
这是关于this website

Answer 1

由于你没有提到用于class="navigatie"的样式，我猜你在那里使用了float属性。如果是，请将overflow:hidden添加到.container。例如，

.container {
    width: 1000px;
    margin: auto;
    height: 100%; /* For IE6 */
    overflow:hidden /* For all other browsers*/
}

如果我的假设不对，那么请提供.contaier内的完整样式表的完整列表。

修改试试这个

HTML: <div class="contentPart"> <?php //include the page content include_once ("content/".$_PAGE.'.php'); ?> </div> CSS: .contentPart { overflow:hidden; height:100%; }

Answer 2

尝试添加一个浮点数：左; to .footer class

.footer{
  float:left;
}

如果你能得到一个jsFiddle它会大大帮助

将页脚放在内容下似乎不起作用

2 个答案: