Question

这是我的网页HTML：

<body>
  <header></header>
  <div class="conteudo_representantes"></div>
  <div class="rodape"></div>
</body>

我在.conteudo_representantes div 中的内容超越了.rodape（页脚） div 。

这是我的页面的CSS：

.conteudo_representantes {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    min-height:586px;
    margin-top:40px;
    position: relative;
}


.rodape {
    position: relative;
    width:960px;
    height:50px;
    margin:36px auto;
    background:transparent url(../img/header_pattern.png) repeat top left;
}

可在此example中找到整页来源。（点击列表的第二行，其中显示： 02 - 圣保罗 - 资本，以查看此问题的实际效果。）

我做错了什么？

Answer 1

问题是你的div conteudo_representantes 没有正确地包装它的所有内容，因此就其关注而言，页脚处于正确的相对位置且代表 div由于某种原因而溢出

编辑：

实际上，这与您管理float属性的方式有关。

您的div 代表向左浮动，但页脚没有。您可以通过从个代表 div关闭float:left来测试此功能。

这是div重叠的常见原因。

在布置HTML页面时，请考虑每个div元素如何堆叠到下一个。 float元素最终将决定divs堆栈的方式

快速guide正确堆叠元素

Answer 2

如果我没错，那是因为您为min-height指定了#container。如果内容超过该高度，这允许它增长。而且因为它是min-height，所以当内容变大时，它不会推倒页脚。

更新：问题应该通过向clear:both添加#footer属性来解决。

为什么一个<div>与另一个<div>重叠？</div> </div>

2 个答案: