Question

我有一些严重的问题让我的页脚粘到我的页面底部。我尝试了很多在互联网上找到的教程，但没有一个能让它起作用？！无论我做什么，即使我把页脚放在我的容器div之外，我的页脚总是在我的content-div中的内容之下？！？！

继承我的代码。我希望你能看到并告诉我无论我做错什么......

我也尝试过使用清洁剂，但也没有使它工作......

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Untitled</title>
</head>
<style>
/*=============== HTML ============*/
html
{
    min-height: 100%;
}
/*=============== Body ============*/
body { 
    font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    min-height:100%;
    height: auto;
    width: 100%;
}

/*=============== Container  ============*/
.container
{
    width: 98%;
    margin: 0px auto 0px auto;
    padding: 5px 0 0 0;
    background-color: #F5F5F5;
    height: 100%;
    position:relative;
}

/*=============== Højre/reklame ============*/
.commercial
{
    width:200px;
    height:90%;
    float:right;
    background-color:inherit;
    margin: 0px 5px 5px 5px;
    padding:5px 5px 5px 5px; 
}

/*=============== Venstre ============*/
.lefty
{
    width:150px;
    height:90%;
    float:left;
    margin:5px 5px 5px 5px;
    padding:5px 5px 5px 5px;
}


/*=============== Indhold1 ============*/
.content
{

    background-color: inherit;
    margin:5px 220px 5px 170px;
    padding:0px 5px 5px -3em;
    float:none;
}


/*=============== Footer ============*/
.footer
{
    width:98%;
    border-top: 2px solid #242F24;
    background-color: #F5F5F5;
    text-align: center;
    position: relative;
    bottom:0;
    z-index: 10;
    height: 3em;
    margin: auto;


</style>

<body>

<div class="container">
<div class="lefty">
Left
</div>
<div class="commercial">
Right
</div>
<div class="content">
Indhold<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>


</div><!—End Content—>
<div class="footer">
Footer
</div>
</div><!—End Container—>


</body>
</html>

Answer 1

将页脚设置为固定位置：

.footer {
  bottom:0;
  position:fixed;
}

使页脚粘到底部

1 个答案: