2

这个可怕的问题。

我目前拥有的

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

4

4 回答 4

2

将此 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; 
}
于 2013-07-14T14:55:09.433 回答
0

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

于 2013-07-14T22:20:56.880 回答
0

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

CSS：

.clear { 明确：两者；}

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

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

于 2013-07-14T14:51:08.303 回答
-1

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

.footer {
    width: 100%;
    height: 25px;
    position: fixed;
    bottom: 0px;
于 2013-07-14T14:54:56.740 回答