-1

我有一些严重的问题使我的页脚粘在页面底部。我已经尝试了很多我在互联网上找到的教程，但都没有成功？！无论我做什么，即使我将页脚放在容器 div 之外，我的页脚也将始终位于内容 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—&gt;
<div class="footer">
Footer
</div>
</div><!—End Container—&gt;


</body>
</html>
4

1 回答 1

4

将页脚设置为固定位置：

.footer {
  bottom:0;
  position:fixed;
}
于 2013-02-02T23:27:45.420 回答