Question

当我对页脚进行快速模拟时，我只是注意到了这一点。我的.container就像这样坐在页面的顶部（绿色在萤火虫中突出显示）：

enter image description here

这是我的布局文件：

<body class="<%= controller_name %>">
<%= render 'layouts/header' %>

<div class="container">
  <%= render 'shared/alerts' %>
  <div class="main">
    <%= yield %>
  </div>

  <div class="sidebar">
    <%= render 'layouts/sidebar' %>
  </div>
</div>

<%= render 'layouts/footer' %>
</body>

这表明它已正确打开和关闭。

唯一应用的是：

.container {
  margin: 0 auto;
  margin-top: 65px;
}

以及媒体查询中特定于浏览器宽度的宽度大小。

这意味着布局方面，技术上是页面上最后一页的页脚，就像这样，因为它位于容器下方。但奇怪的是，.container中的所有内容都适当地以margin为中心：0 auto。我不知道发生了什么。

Answer 1

我的猜测是你在页眉和页脚之间有一些浮动的块级容器，浮动没有被清除。

因此，页脚内容会围绕最右边的浮动div。

您需要在侧边栏元素之后清除浮动。

可以肯定的是，我需要查看更多HTML / CSS，但图像提供了一个很好的线索。

作为快速解决方法，您可以尝试将overflow: auto添加到footer容器的CSS规则集中。

Answer 2

你需要＆＃34;清除花车＆＃34;。

例如，当元素为float:right时，它就会从布局流中移除。它不会压低它下面的任何东西（包括它的底部包含元素），除非这些东西也是正确的，或clear:right。 Clear基本上说'＃34;好吧，尊重所有这些浮动的东西的底部＆＃34;。

clear:both最常使用，并且正如它所说的那样。

Chris Coyier用this article.

指出它

你也可以自己建立一个＆＃34; Clearfix＆＃34;如果这是您在布局中经常遇到的问题。 Here is a bunch of methods for doing that.

容器div不正确......包含

2 个答案: