修改

Question

我需要让我的页脚停留在底部，但也不要干扰我的内容。正如在jfiddle中看到的那样，蓝色框会干扰页脚。在查看了所有当前线程并尝试修复我的CSS和HTML后，我找不到我的解决方案。我尝试将位置更改为固定，添加一些填充等。以下是我的代码： http://jsfiddle.net/9A2gL/8/ 基本上我有：

<html><div id="wrapper"><header></header>
<body></body>
<footer></footer></div></html>

我有浮动div，但我使用了clearfix clear: both;

另外，请阅读：我确实有一个有效的HTML结构，但jsfiddle不建议放置标签。请关注浮动方面，因为当我从CSS中取出float:right;时，它正在运行.news。当我删除代码以使页脚粘在页面底部时，它也可以工作。

Answer 1

您的HTML标记是Messed首先请W3C Stabdards，并更正您的HTML标记这样的事情

<!doctype html>
<html>
<head>
      <meta charset="utf-8">
      <title>Untitled Document</title>
</head>

<body>
      <header></header>
      <footer></footer>
</body>
</html>

您的页脚的秒数请在正确的标记之后应用clearfix类或只是

.Clear{
   clear:both;
}

你很高兴（y）。

Answer 2

我知道这是一个小提琴（谢谢！），但你的HTML标签不合适。话虽这么说，我从你的小提琴看到的图像如下

<div id="wrapper">
   <div id="container">
<!-- REMOVED body HTML tag-->
       <div id="content">...</div>
       <aside>
          <div class="advert">..</div>
          <div class="news">..</div>
       </aside>
    <!-- End Container -->
    </div>
    <div class="clearfix">..</div>
    <footer>..</footer>
<!--End Wrapper-->
</div>

enter image description here

修改

在您的旁边添加下边距。

Answer 3

clearfix div应该在容器的end div之前添加。

页脚忽略浮动内容

3 个答案:

修改