Question

我使用position：absolute得到白色背景（.big-content）为100％高度，但是现在它让我的页脚浮动了！我怎样才能解决这个问题？ wolvesofys.weebly.com

这是我的CSS：http://wolvesofys.weebly.com/files/main_style.css?1374887463 这是我的HTML：view-source：http://wolvesofys.weebly.com/ 我认为包装是问题。

<div class="wrapper">
<div id="wrap">
<div class="big-content">
<div class="content">
<div class="container">
<p>Text here</p>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>

页脚内容：

<footer>
<div id="wrap">
<div id="page_footer">
<ul>
<li></li>
<li><a href="#terms">Terms and Conditions</a></li>
<li>/li>
<li><a href="#contact">Contact</a></li>
<li></li>
<li><a href="#help">Help</a></li>
<li></li>
</ul>
<div id="copyright">Content &copy; 2013 FeraLupus.com</div>
</div>
</div>
</footer>

Answer 1

通过使用height：100％，它会告诉类.big-content将其自身完全展开到它所在的父元素的高度。这不会考虑您拥有的任何边距或填充设置（因此它可能会超出父元素或看起来模糊不清）。

绝对定位的工作方式是将其从页面的“流”中删除。你的页脚在技术上并不浮动，你通过使前一个元素绝对来破坏它的流动。虽然没有看到实际的页面代码，但很难告诉你如何解决问题。

Answer 2

以这种方式使用absolute不好，所以我将其删除。

相反，我从auto课程中移除了.wrapper高度。并将fixed位置添加到footer（在这种情况下，可以接受使用）

这里是现场演示：http://plnkr.co/edit/UYKfJrxbnqYlSiEaitNW?p=preview

你有宽度问题，但这是另一个问题。

浮动页脚高度为100％？

2 个答案: