Question

这个可怕的问题。

我目前拥有什么

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相关，而不是整个页面高度 Not full height pic 2.所以我在包装器div里面有div，它延伸到包装器，主体和html标签之外？

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

我正在考虑使用javascript来获取像素的真实高度并将其传递到高度并放弃百分比。唯一的问题是我还想知道最新情况！

谢谢， JT

Answer 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; 
}

Answer 2

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

CSS：

.clear {clear：both; }

.footer {margin-top：-36px; }

问题是浮动元素的行为类似于绝对定位元素。在计算包装div的高度时不会考虑它们。

Answer 3

最后我只是通过像素而不是百分比设置了html body标签。我上面没试过的任何事情让我满意。

Answer 4

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

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

将页脚放在页面底部

4 个答案: