使页脚粘在底部答案

【问题标题】：Make footer stick to bottom使页脚粘在底部
【发布时间】：2013-01-18 00:36:07
【问题描述】：

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


</body>
</html>

【问题讨论】：

标签： html css positioning footer sticky-footer

【解决方案1】：

将页脚设置为固定位置：

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

【讨论】：

不错。但这并没有完全解决我的问题，尽管我可以有很长的内容或非常小的内容，并且在内容很长的页面上这个固定位置在浏览器的底部而不是在 html 页面上，我需要在底部该页面并不总是在浏览器窗口中可见 - 如果您理解？
啊，我没明白你的意思。不过，在这种情况下，它应该已经像这样工作了，至少当它的宽度太大而不能放在前一个 div 旁边时。如果 'content' 和 'footer' 在 'container' 中彼此相邻，您可以增加任一宽度或提供 'content' margin-right:<certain amount of pixels>;
另外，如果我可以提出一些建议，最好学习 xhmtl 而不是 html 4。Html 4 已经很老了，在不久的将来可能不会被所有浏览器支持，所以你要熬夜-迄今为止。 ;) 除此之外，在深入研究这一级别的 css 之前，您可能希望进一步改进您的 html 标记；您的 html 包含一些缺陷。（例如<!- comment ->应该是和一个空的<style>标签应该是<style type="text/css rel="stylesheet">