0

I've coding for about a week now and I'm learning all by my self (which hopefully explain a lot of my errors in this code).

I've tried dozen of examples to get my footer to stick to the bottom of the page. When i try to change the "position:absolute" of the wrapper or footer, it either gives a gap between the browser window and header or puts the footer up on the top.

I have no idea how to fix this. (Some tips for my code is also greatly appreciated!)

HTML http://pastebin.com/ksgJSUpz

CSS http://pastebin.com/i9nPtYkU

Thanks!

4

1 回答 1

0

问题是您一直在使用position:absolute整个代码。绝对定位会打断文档的流动。

如果您使用相对定位或根本没有定义定位（静态位置），则元素将一个接一个地运行。使用您的代码，您必须计算每个元素的高度 end 开始下一个元素，前一个元素手动结束。发生这种情况是因为绝对定位的元素不会将其他元素向下推。他们好像没有身高。例如，您的标题高度为 100 像素；然后你从绝对定位和前 100px 开始你的信息；

你的页脚会走到你告诉他的绝对位置。问题是你不知道那个位置是什么，因为你有一个高度可变的元素。如果你把 `bottom:0;' 使用绝对定位，标题只会位于其父级的底部。在您的情况下，它的父级是没有定义特定高度的包装器。所以#wrapper 获取其内容的高度，但由于它的内容都是绝对定位在其中的，正如我所说的那样，它破坏了流程，它不会从它们那里得到任何高度。相反，#wrapper 获取窗口的高度，而不是整个文档。

最好的办法是在没有绝对定位的情况下重新设计您的页面。

一些快速的解决方法是给你的包装器一个特定的高度，比如height: 1200px; 这将迫使你的页脚去并坐在那些 1200 像素的底部

包装器高度示例

另一种解决方案是为您的页脚使用固定定位。这将使页脚即使在滚动时也会粘在窗口的底部。

固定定位示例

但实际上你应该做的是从一开始就重新设计页面，并避免在不需要的地方进行绝对定位。

于 2013-10-23T22:52:02.960 回答