获取页面底部的页脚答案

【问题标题】：Getting the footer on the bottom of the page获取页面底部的页脚
【发布时间】：2013-07-30 11:16:09
【问题描述】：

这个可怕的问题。

我目前拥有的

html:

 <html>
 <body>
 <div class="wrapper"></div>
 <div class ="footer"></div>
 </body>
 </html

css:

 * {
margin: 0;
 }
 html, body {
height: auto !important;
height: 100%;
 }
 .wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0;
 }
 .footer
height: 36px; 
 }

问题是当我用 chrome 检查渲染的页面时，我看到了一些问题： 1. html标签有一个与之关联的高度hmmm，而不是整个页面的高度 2. 所以我在包装器 div 内有 div，它延伸到包装器、正文和 html 标记之外？

我最好的猜测是，如果我可以将 html 设置为页面高度，我可以将页脚设置为页面底部。

我正在考虑使用 javascript 来获取以像素为单位的真实高度并将其传递给高度并放弃百分比。唯一的问题是我还想知道发生了什么！

谢谢， JT

【问题讨论】：

包装 div 是否包含浮动元素？
我相信有几个！好的，所以我将其更改为仅浮动的东西是按钮和图像......但我不明白这会如何引发 html 标记被全部搞砸
好吧.. foreach 包含浮动元素的元素.. 在元素（包含浮动）结束标记之前放置一个 div，并在我的答案中指定 css 类

标签： javascript jquery html css

【解决方案1】：

将此 css 添加到您的包装器 div 中

  wrapper_div{ overflow:hidden; }

这是一种重新计算元素内浮动元素的技巧。否则浏览器会忘记浮动元素，overflow-hidden 可以解决问题，或者您可以像这样在包装 div 的底部附加一个清晰的浮动元素

CSS

clear_float{
     clear:both; display:block;
     overflow:hidden; visibility:hidden;
     width:0px; height:0px;
}

HTML

  <div class="wrapperdiv">
    /* other HTML elements*/
    <div class="clear_float"></div>
  </div>

这是假设麻烦的 div 被归类为wrapperdiv

再看这完全无效

html, body {
 height: auto !important;
 height: 100%;
}
.wrapper {
 height: auto !important;
 height: 100%;
}

您在一个声明中设置了两次高度。 height: auto !Important 将优先于 height: 100%，因此您需要决定是否希望您的高度自动显示为 100%。

而你错过了这个 css 声明中的开始块

.footer
 height: 36px; 
}

【讨论】：

我想你明白了！给我一秒钟
在 html 和 body 元素上现在是整个页面。整个页面中的包装。问题...滚动条现在消失了，我看不到整个页面，并且页脚粘在可见页面的底部而不是内容的底部。
尝试第二种解决方案，将一个清晰的浮动 div 元素附加到 div 或 body 中，哪个是麻烦的元素。就像我说的有两种方法可以解决这个问题，这一切都取决于什么对你来说最重要
html 和 body 标签现在是可见页面的高度，而不是内容的底部
此时我对您的问题感到困惑。您可以将 <body> 标记内的所有 html 元素包装在包装器 div 中。当您这样做时，您可以将溢出隐藏添加到此包装器 div 的样式或将 clear_floated div 元素附加到包装器 div。如果我正确理解问题，这应该是解决方案。

【解决方案2】：

在包装器的结束标记之前添加一个带有“clear”类的 div

CSS：

.clear { 清除：两者； }

.footer { 边距顶部：-36px; }

问题在于浮动元素的行为类似于绝对定位元素。在计算包装器 div 的高度时，它们没有被考虑在内。

【讨论】：

所以我在关闭包装 div 之前添加了一个
并设置了样式...没什么...为什么 HTML 和 body 标记不在底部内部分区。
问题是浮动元素的行为类似于绝对定位元素。在计算包装器 div 的高度时，它们没有被考虑在内。我知道.. 病态的页脚很可怕..
好的，如果我缩小它的完美效果，我可以让它工作，但放大时没有滚动条可以看到其余的内容。？

【解决方案3】：

最后，我只是通过像素而不是百分比来设置 html 正文标签。我在上面尝试过的任何东西都没有让我满意。

【讨论】：

【解决方案4】：

如果你想要一个像固定页脚状态栏这样的 facebook。尝试使用以下 css：

.footer {
    width: 100%;
    height: 25px;
    position: fixed;
    bottom: 0px;

【讨论】：