0

主要标记

<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

如您所见，页脚位于内容后面的页面中间上方...

4

3 回答 3

0

起初，我认为可能是您没有清除浮动。但后来我注意到每个浮动元素都是绝对定位的。通过应用position:absolute到一个元素，您将其从文档流中剥离出来。解决此问题的最佳方法是position:absolute从您的“小部件”中删除，但是您的设计将不会显示为您当前拥有的样子。

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

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

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

于 2012-08-29T14:28:00.560 回答
0

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

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

于 2012-09-06T12:30:11.007 回答
-1

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

第一：对于任何页脚来说，这都是一个很好的起点。用它。

第二：您可能已经注意到，包含所有浮动框 ( .centerCnt) 的容器不够大，无法容纳所有浮动框。要解决此问题，您需要使用良好的.clearfix. 有很多可供选择，但我使用这个：

/* 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否则 Sticky Footer 将不起作用。

更新：简单地使用 clearfix 可能会解决您的问题。将上面的代码添加到您的 CSS 并给出.centerCnt类clearfix.

于 2012-08-29T14:37:11.833 回答