Question

主要标记

<body>
  <div id="contenedor">
      ....
  </div>
  <div class="fLeft"> <footer > ... </footer> </div>
</body>

CSS

body{
}
#contenedor{ float: left; width:100%;}
.fLeft{ float:left }

我猜最好的方法是对该页面进行抨击..

http://209.51.221.243/integracion/login.php

正如您所看到的，页脚位于内容后面页面的中间位置...

Answer 1

起初，我认为你可能没有清理你的漂浮物。但后来我注意到每个浮动元素都是绝对定位的。通过将position:absolute应用于元素，您可以将其从文档流中删除。解决此问题的最佳方法是从“小部件”中删除position:absolute，但之后您的设计将无法显示当前的设置。

解决您的限制的想法/建议是将页脚修复到页面底部。将以下内容应用于<footer>：

footer {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
}

您会注意到，当您在页面上滚动时，您的页脚会保持不变，这很可能不太理想，但我可以保证它会保留在页面底部。否则，由于滥用某些属性，您正在考虑重新设计样式。

Answer 2

您在页脚之前使用浮动div，因此，为了将页脚放在这些div之后，您的页脚的css应包含：clear: both;或clear: left;，在您的情况下。

文档：http://www.w3schools.com/cssref/pr_class_clear.asp和（当然）https://www.google.com/search?q=css+clear：）

Answer 3

UPDATE2：我意识到自己错了。这个答案在这种特殊情况下不起作用。

首先：This对于任何页脚都是一个非常好的起点。使用它。

第二：您可能已经注意到具有所有浮动框（.centerCnt）的容器不是很大，以适应它们。要解决此问题，您需要使用好的.clearfix。有很多可供选择，但我使用this一个：

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. - j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }

您需要.centerCnt，否则粘性页脚将无效。

更新：仅使用clearfix可能会解决您的问题。将上面的代码添加到CSS中，然后将.centerCnt提供给clearfix。

为什么这个页脚不在内容的最后？

3 个答案: