容器div不正确…包含
[英]Container div not properly… containing
问题描述
I just notice this when I put in a quick mock for a footer. 
当我在页脚中放置快速模拟时，我只是注意到这一点。 My .container is sitting at the top of the page like this (Green highlighted in firebug): 我的.container像这样坐在页面顶部（萤火虫中绿色突出显示）：
This is my layouts file: 这是我的布局文件：
<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>
Which shows that it's correctly opened and closed. 这表明它已正确打开和关闭。
The only css applied is this: 唯一应用的CSS是这样的：
.container {
margin: 0 auto;
margin-top: 65px;
}
along with browser-width specific width sizing in media-queries. 以及媒体查询中特定于浏览器宽度的宽度大小。
This means that layout wise, the footer which is technically the last thing on the page, comes up to the top like this because it's below the container. 这意味着从布局角度来看，页脚在技术上是页面上的最后一件事，因此像这样到达顶部，因为它位于容器下方。 Oddly however, everything inside .container is appropriately centered with margin: 0 auto. 但是奇怪的是，.container内部的所有内容都适当地以margin：0为中心。 I have no idea what's going on. 我不知道发生了什么事。
2 个解决方案
解决方案1
1 2014-06-29 01:57:55
My guess is that you have some floated block level containers between the header and the footer, and the floats are not cleared. 我的猜测是，在页眉和页脚之间有一些浮动的块级容器，并且没有清除浮动。
As a result, the footer content is wrapping around the right most floated div. 结果，页脚内容环绕最右边浮动的div。
You need to clear the floats probably after the sidebar element. 您可能需要在侧边栏元素之后清除浮点数。
To be sure, I would need to see more of your HTML/CSS but the image gives a good clue. 可以肯定的是，我需要查看更多的HTML / CSS，但该图像提供了很好的线索。
As a quick fix, you could try adding overflow: auto to the footer container's CSS ruleset. 作为快速解决方案，您可以尝试将overflow: auto添加到footer容器的CSS规则集中。
解决方案2
1 已采纳 2014-06-29 03:05:19
You need to "Clear your floats". 您需要“清除浮标”。
When an element is float:right for example, it is in a way, removed from the flow of the layout. 例如，当一个元素为float:right ，它在某种程度上已从布局流程中移除。 It won't push down anything below it (including the bottom of it's containing element) unless those things are also floated right, or clear:right . 除非这些内容也向右浮动或clear:right ，否则它不会下推其下方的任何内容（包括其包含元素的底部）。 Clear basically says "ok, respect the bottom of all this floated stuff". 克莱尔基本上说：“好的，尊重所有这些浮动的东西的底部”。
clear:both is used most often, and does just what it says. clear:both都是最常使用的，并且按照它说的去做。
Chris Coyier nails it with this article. 克里斯·科耶尔（Chris Coyier）在本文中对此进行了介绍。
You can also build yourself a "Clearfix" if this is something you run into often in your layouts. 如果您经常在布局中遇到这种问题，也可以自己构建一个“ Clearfix”。 Here is a bunch of methods for doing that. 这里有很多方法可以做到这一点。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.