页脚不停留在底部答案

【问题标题】：Footer not staying at bottom页脚不停留在底部
【发布时间】：2015-01-28 16:49:19
【问题描述】：

您好，我知道有很多关于同一件事的问题，我已经尝试了这些答案，但没有一个有效。所以我已经使用了 min-height:1000px;在我网站的主体上，使所有页面的大小相同，但是这样做之后我的页脚很乱，页脚现在位于页面中间，不再占据页面的整个宽度，它就在页面的左侧，

HTML

<footer>
&copy; Digital Canvas Web Designs est 2012
</footer>
</div> <!--wrapper-->

和 CSS

footer {
position:absolute;
width:auto;
bottom:0;
height:20px;
padding-bottom:20px;
border-top-color: #990012;
border-top-width:2px;
border-top-style:solid;
text-align:center;
font-family:georgia, serif;
font-style:italic;
font-size:0.75em;
}

我希望边框一直穿过页面底部。有任何想法吗？干杯

【问题讨论】：

您是否尝试过使用 position: relative 而不是 absolute。见jsfiddle.net/dq2zse2t

标签： html css web footer

【解决方案1】：

我想这就是你要找的东西：http://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible/（如果你愿意，文章末尾有一个 codepen）

如果你需要翻译，我会帮忙的。

【讨论】：

【解决方案2】：

尝试将宽度定义为 100%

footer {
    position:absolute;
    width:100%;
    bottom:0;
    height:20px;
    padding-bottom:20px;
    border-top-color: #990012;
    border-top-width:2px;
    border-top-style:solid;
    text-align:center;
    font-family:georgia, serif;
    font-style:italic;
    font-size:0.75em;
}

【讨论】：

一般最好用left:0;和权利：0;。宽度：100%；通常是一个坏主意，大多数时候您可以简单地避免它（表单字段和表格除外）。 codepen.io/Manumanu/pen/ryhaC blog.goetter.fr/articles/width-100-tu-es-le-mal（法国）

【解决方案3】：

编辑。尝试 position:relative to #wrapper 和 position:absolute;底部：0；到页脚。

【讨论】：

【解决方案4】：

列出了解决页脚问题的几个技巧： https://css-tricks.com/couple-takes-sticky-footer/

最适合我的是：

HTML：

<body>
  <div id="main-container">

      content

  </div>
  <footer></footer>
</body>

CSS：

html, body {
  height: 100%;
  margin: 0;
}

#main-container {
  min-height: 100%;
}

【讨论】：

【解决方案5】：

尝试将位置更改为相对位置。

.wrapper{
position :absolute;
}

footer {
position:relative;
}

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。
感谢您的信息。编辑了答案。