html - footer 不继承定位属性？

Question

我的 html 和 css 代码一直很顺利，直到我现在面临这个问题，我不知道发生了什么。

我的 html 模式是这样的。

顶部是<div id="header">它没有任何固定宽度。我使用了图像并使用了 repeat-x 属性。在标题中，我将导航菜单包裹在 940 像素的容器中；

中间是<div id="content">用同样 940px 的容器包裹；

直到内容 div 我的代码都很好。现在我面临着正确定位页脚的问题。我的页脚不应该有任何固定宽度，也不应该包裹在容器中。所以我在内容和容器 div 之外定义了页脚 div，它就在 body 和 html 标记结束之前。

当我这样做时，页脚图像的尺寸为 50px X 290px；向上移动并从内容 div 开始放置。它不会触底。我暂时用margin-top:1600px;正确定位它是错误的。

为什么它不继承位置，我尝试给每个位置属性。它不工作:(,

我错过了什么？

P.S:代码有点长，所以我没有把它贴在这里，而是解释了发生了什么。如果您仍想查看我的代码，我可以尝试放置最少的代码。

谢谢

编辑:这是 jsfiddle 和我的代码的链接。 http://jsfiddle.net/32ShZ/

Answer 1

问题似乎是 #footer没有清除 float 的 div(天哪，你确实喜欢你的 div，不是吗？70？在一个文档中？)。所以，添加:

#footer {
clear: both;
width:940px; /* copied from your other divs */
}

似乎已经奏效了。到目前为止，我不确定为什么 #footer不尊重 margin: 0 auto;但是，它似乎仍在正确的轨道上前进。看看:jsfiddle.net/32ShZ/3/ (你会注意到我使用了一些 jQuery 来填充所有的 div，所以我可以看到什么在哪里。并添加了一个 background-color 到 #footer 以使其更加可见，这些显然是可选的)。

---

编辑回应评论:

i am confused about the jQuery code. what is it exactly.?

jQuery是一个 JavaScript 库，编写用于提供跨浏览器兼容的抽象，因此，在大多数情况下，一组代码应该在从 IE 到 Chrome 的跨浏览器中产生一致的结果。其 api 可在线查看，网址为:jQuery.com .

$('div').each(
    function(i) {
        $(this).append('<p>Div (' + i + ') ' + $(this).attr('id') +'</p>');
    }
);

我使用的代码，一步一步:

1. 找到所有 div页面上的元素，$('div')
2. 迭代每个元素，并应用一个函数。 i是一个迭代器 .each(function(i){...})
3. 处理当前元素，$(this)
4. 附加一个<p>到元素，文本内容为 `.append('

   Div (' + i + ') ' + $(this).attr('id') +'

   ')
5. $(this).attr('id')部分查看当前元素并找到其“id”属性，并将其插入到字符串中。