HTML5 和 CSS 中的粘滞页脚问题答案

【问题标题】：Issue in sticky footer in HTML5 and CSSHTML5 和 CSS 中的粘滞页脚问题
【发布时间】：2014-10-20 20:06:39
【问题描述】：

这是我的代码：

<footer>

<div id="footer">
<div class="footer-column" id="footer_column1">
<nav class="footer-link">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>

<li>Home</li>

<li>Home</li>

</ul>
</nav>
</div>
  <div class="footer-column" id="footer_column2"> 
<nav class="footer-link">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>

<li>Home</li>

<li>Home</li>

</ul>
</nav>
</div>
  <div class="footer-column" id="footer_column3">
<nav class="footer-link">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>

<li>Home</li>

<li>Home</li>

</ul>
</nav></div>
  <div class="footer-column" id="footer_column4">
<nav class="footer-link">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>

<li>Home</li>

<li>Home</li>

</ul>
</nav>
</div>

</div>
</footer>

我使用 HTML5 和 CSS 创建了粘性页脚。

和 CSS：

#footer {
   position:absolute;
   clear:both;
   bottom:0;
   color:#000;
   width:100%;
   height: 100px;
   background:#fff;
   margin-top:100px;
   left:0;

}
.footer-column {
  float: left; /* Push the div as far up-left as it can be put */
  width: 25%; /* Make sure to subtract the padding */
  padding: 10px; /* We want padding on all sides to make things look nice */
  text-align:center;
}

.footer-column .footer-link ul li
{
    list-style-type:none;
    display:block;
}

而用于包装的 css 是，#wrap{width:100%;} 现在页面看起来像这样，http://s28.postimg.org/qrt1vysy5/Untitled_1_copy.png。

我可以知道，为什么我不能设置我的粘性页脚的正确高度吗？

谁能帮我解决这个问题？

【问题讨论】：

你已经在stackoverflow.com/questions/26462275/…这里发布了同样的问题，对吧？？
仍然，我没有得到解决方案@Aru
除非您发布示例小提琴代码，否则很难解决确切的问题！！
@Aru 在这种情况下的具体问题是他认为出于某种原因他想要一个绝对定位的页脚 div，即使它已经包含在页脚元素中。我提供的答案是正确地创建了一个“粘性”页脚。但是你是对的，他没有包含足够的代码来查看他犯了多少 html 错误。

标签： css html

【解决方案1】：

This link should help you figure it out.

相关代码：

#main {overflow:auto;
    padding-bottom: 180px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear:both;}

【讨论】：

我认为这不是正确的代码@charles，因为不要添加负值。谢谢。
这里使用负边距没有任何问题。它只是指定您希望包含在 main 中的页脚出现在填充中。 And a reference, because why not.
但是从你的回答来看，如何添加 main.. 我没有 main.. 我正在使用 wrap.. 所以我可以使用样式 padding-bottom: 180px;换行？
@deepika 你可能应该清理这里的 html。您正在使用 HTML5 页脚标记，以及带有 id 页脚的 div。 css 文件中的 id 名称不应被视为黄金。只需使用它们来满足您的目的。
@Aru，我已经向模组报告了这篇文章。我们将无法在此处获得有关 deepika 问题的足够详细信息。他把这点说得很清楚了。