Question

http://jsfiddle.net/vol7ron/bKWtM/

<body>
   <div id="head"></div>
   <div id="body"></div>
   <div id="foot"></div>
</body>

body   { padding:0;margin:0;}
#head  { position:absolute; height:20px; width:100%; background:#900; top:0;    }
#foot  { position:absolute; height:20px; width:100%; background:#090; bottom:0; }
#body  { position:absolute; top:0; z-index:2;}

// filler
for (var i=1,n=50;i<=n;i++){
   $('#body').append('<div>' + i + ' (filler) </div>');
}

我要做的是将页脚放在文档的最底部，而不是打开的窗口。因此，绿色条将在第50行之后出现，而不会出现在开场视图中。

我正在寻找经典布局，如果没有绝对定位，标题将位于顶部，然后是正文，那么你必须滚动才能查看页脚。唯一的区别是我希望身体与标题重叠（因此绝对定位）。

注意： 的

我不希望页脚有固定的位置。。
我不想使用JavaScript

任何帮助都将不胜感激。

Answer 1

你自己造成了不必要的复杂化。如果您的唯一目标是将主体与标题重叠，那么您可以使用负边距。然后你可以把所有东西都静态定位。

工作示例：http://jsfiddle.net/uaBpx/1/

否则，我无法想到在文档底部放置某些内容，因为示例中的文档高度实际上是0px。一旦你拿出所有内容（通过绝对定位），就没有高度。

CSS：位于页面底部的位置元素（不可见窗口）

1 个答案: